Wie suche ich DOM-Elemente mit XPath- oder CSS-Selektoren in Chrome Developer Tools?

116

Das Dokument http://code.google.com/chrome/devtools/docs/elements.html besagt, dass es XPath- oder CSS-Selektoren unterstützt, aber als ich es versuchte, schien es für mich nicht zu funktionieren.

Weiß jemand, wie man es benutzt?

dom google-chrome google-chrome-devtools Bobo
quelle

Antworten:

263

Sie können $xin der Chrome-Javascript-Konsole verwenden. Keine Erweiterungen erforderlich.

Ex: $x("//img")

Matt Polito
quelle

Dies ist eine hilfreiche Antwort. Zum Hinzufügen akzeptiert die $ x-Funktion ein zweites optionales Argument, den Kontext. $ x (xpath, context) Hiermit können Sie beispielsweise einen bestimmten iframe-Inhalt auswählen und eine xpath-Abfrage dagegen ausführen. Also für den ersten iframe: myframe = document.getElementsByTagName ("iframe") [0] .contentWindow.document.body; #to xpath fragt diesen Iframe für Tabellenzellen ab: $ x ("// td", myframe);

Adolph Trudeau

Um ein Element mit einem CSS-Selektor zu finden, sollte man die $$ -Konsolenfunktion verwenden, z. B. $$ ('body')

Dmitry Korolyov

Weitere Befehle finden Sie hier: developer.google.com/chrome-developer-tools/docs/…

Dmitry Polushkin

Kommen wir nach fast 2 Jahren auf diese Frage zurück, ja, diese ist schöner.

Bobo

Sehr gut zum Debuggen von XPaths! Die $x()Funktion funktioniert übrigens auch in der Safari-Befehlszeilen-API.

Otto G

Es sollte funktionieren, wenn Sie nur den xpath-Ausdruck in das Suchfeld eingeben. Es funktioniert für mich im Baumspitzenbau.

Die Funktion scheint in Chrome 11 defekt zu sein. Ich habe hier einen Fehler gemeldet : http://crbug.com/79716

Yury Semikhatsky
quelle

Du hast recht. es funktioniert, aber die Hervorhebungsfunktion ist defekt. Ich benutze Chrome 10.0. * Auf Mac OS X.

Bobo

bessere Antwort von Mark Polito unten.

FGM

Es funktioniert mit Chrome 32. Gehen Sie zur Registerkarte Element des devtools und drücken Sie STRG + S und suchen Sie nach dem xpath

eeezyy

@eeezyy du meinst Strg + F?

Box

Für xpath-Suchen verwenden $x('xpathSelector'). Für einen CSS-Selektor verwenden $('cssSelector').

Dieser letzte Selektor gibt jedoch nur das erste übereinstimmende Element zurück. Wenn Sie alle passenden Elemente sehen möchten, gehen Sie für$$('cssSelector')

cham
quelle