Jak wyszukiwać elementy DOM za pomocą selektorów XPath lub CSS w narzędziach programistycznych Chrome?

Odpowiedzi:

263

Możesz użyć $xw konsoli javascript Chrome. Nie potrzeba żadnych rozszerzeń.

dawny: $x("//img")

Matt Polito
źródło
28
To jest pomocna odpowiedź. Aby to dodać, funkcja $ x przyjmuje drugi opcjonalny argument, kontekst. $ x (xpath, context) To pozwala na przykład wybrać konkretną zawartość elementu iframe i uruchomić względem niej zapytanie xpath. Tak więc dla pierwszej ramki iframe: myframe = document.getElementsByTagName ("iframe") [0] .contentWindow.document.body; #do xpath zapytaj, że iframe dla komórek tabeli: $ x ("// td", myframe);
Adolph Trudeau
12
aby znaleźć element z selektorem CSS, należy użyć funkcji konsoli $$, np. $$ ('body')
user907860
3
Więcej poleceń można znaleźć tutaj: developers.google.com/chrome-developer-tools/docs/…
Dmitry Polushkin
wracając do tego pytania po prawie 2 latach, ta jest ładniejsza.
Bobo
Bardzo dobre do debugowania XPaths! Nawiasem mówiąc, $x()funkcja działa również w interfejsie API wiersza poleceń Safari.
Otto G
15

Wystarczy wpisać wyrażenie xpath w polu wyszukiwania. U mnie działa w kompilacji na wierzchołku drzewa.

Wygląda na to, że ta funkcja jest zepsuta w Chrome 11, zgłosiłem błąd w tym: http://crbug.com/79716

Yury Semikhatsky
źródło
masz rację. działa, ale funkcja podświetlania jest zepsuta. Używam Chrome 10.0. * Na Mac OS X.
Bobo
lepsza odpowiedź Marka Polito poniżej.
FGM
Działa z Chrome 32. Przejdź do zakładki Element w devtool i wciśnij CTRL + S i wyszukaj xpath
eeezyy
@eeezyy masz na myśli ctrl + f?
Box,
3

Do wyszukiwania xpath użyj $x('xpathSelector'). W przypadku selektora CSS użyj $('cssSelector').

Jednak ten ostatni selektor zwraca tylko pierwszy pasujący element. Jeśli chcesz zobaczyć wszystkie pasujące elementy, wybierz$$('cssSelector')

cham
źródło