Google Chrome copy Ścieżka CSS w Narzędziach dla programistów

Narzędzia programistyczne Google Chrome wyświetlają ścieżkę CSS (lub jej dużą część) wybranego elementu na dole paska narzędzi. W Firebug można kliknąć prawym przyciskiem myszy dowolny selektor w ścieżce CSS i pobrać ścieżkę CSS do tego elementu. Czy Google Chrome ma tę funkcję? Jakie narzędzia są dostępne, jeśli nie ma wbudowanej obsługi?Google Chrome copy Ścieżka CSS w Narzędziach dla programistów

Chrome CSS Path

Źródło

2013-03-12 MattDiamant

Possibily to jest odpowiedź [CHROME copy csspath] [1] [1]: http://stackoverflow.com/questions/17292794/css-query-generation-apis/22344323#22344323 – chaosguru

To daje wystarczająco ścieżki na to, aby być unikalny element, ale byłem bardziej szuka całej ścieżki CSS. W każdym razie dzięki! – MattDiamant

Poprawna odpowiedź: https://stackoverflow.com/a/35412554/242933 – ma11hew28

Chrome uaktualnili tę opcję

w Chrome po ostatniej aktualizacji Ta opcja została zmieniona z
(right click on the element in Elements Window) > Copy CSS path
do:
(right click on the element in Elements Window) > Copy > Copy selector

Źródło

2016-02-15 14:59:20

Chrome nie ma, więc ludzie dokonały rozszerzeń Chrome, bookmarkletów i inne narzędzia dla Chrome replikować tej funkcjonalności.

Możliwy duplikat: Chrome equivalent of Firefox Firebug CSS select path

Bookmarklet: http://www.selectorgadget.com/

Chrome Extension: https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi

Chciałbym jeszcze jak cudzych odpowiedzi, sugestie i wskazówki, jak najlepiej radzić sobie z tym w Chrom.

Źródło

2013-03-12 19:07:03 MattDiamant

Zgadzam się, byłoby idealnie móc go po prostu skopiować, ponieważ jest już zbudowany, a także oferują możliwość kopiowania xpath i html z tego samego miejsca. To dość głupio wymagać rozszerzenia na to. – devlord

"Mogę po prostu lepiej nauczyć się Google'a". Straciłem liczbę przypadków, w których przeszukano firmę Google w celu uzyskania pomocy związanej z oprogramowaniem, i znalazłem odpowiedzi na pytania dotyczące oceny jakości, takie jak "Naucz się korzystać z Google". Dziękujemy również za pomocną odpowiedź :) –

Oto mały (coffeescript) urywek które dadzą ścieżkę CSS (do pierwszego elementu id - choć można łatwo zmienić poprzez usunięcie części Przerwa):

getCSSPath = (node)-> 
    parts = [] 
    while node.parentElement 
    str = node.tagName 
    if node.id 
     str += "##{node.id}" 
     parts.unshift str 
     break 
    siblingsArr = Array.prototype.slice.call(node.parentElement.childNodes) 
    ind = siblingsArr.filter((n)-> n.attributes?).indexOf(node) 
    parts.unshift str + ":nth-child(#{ind + 1})" 
    node = node.parentElement 
    parts.join ' > '

używa „: nth-child "dla każdego węzła, więc musisz go zmodyfikować, jeśli chcesz uzyskać również nazwy klas.

Źródło

2015-02-06 14:36:06 JussiR

niesamowita funkcja! – kevinkl3

Możesz kliknąć prawym przyciskiem myszy element w głównym oknie źródłowym i "Skopiuj ścieżkę CSS". To było życie, kiedy muszę pracować na stronach, których nie mogę ponownie zakodować.

Źródło

2015-04-16 20:19:44 Erik

Nie o to prosił OP. –

OP (każdy ja) szuka dłuższej ścieżki niż ta, którą oferuje "Kopiuj ścieżkę CSS" (patrz dół obrazu zamieszczonego) – BillyNair

Google Chrome copy Ścieżka CSS w Narzędziach dla programistów

Odpowiedz

Powiązane problemy