Come cercare elementi DOM utilizzando XPath o selettori CSS negli strumenti per sviluppatori di Chrome?

116

Il documento http://code.google.com/chrome/devtools/docs/elements.html dice che supporta XPath o selettori CSS, ma quando ho provato, non sembrava funzionare per me.

Qualcuno sa come usarlo?

dom google-chrome google-chrome-devtools

— Bobo
fonte

Risposte:

263

Puoi utilizzare $xnella console javascript di Chrome. Non sono necessarie estensioni.

ex: $x("//img")

— Matt Polito
fonte

Questa è una risposta utile. Per aggiungerlo, la funzione $ x accetta un secondo argomento opzionale, context. $ x (xpath, context) Questo ti permette di selezionare un particolare contenuto iframe, per esempio, ed eseguire una query xpath su di esso. Quindi per il primo iframe: myframe = document.getElementsByTagName ("iframe") [0] .contentWindow.document.body; #per xpath interrogare quell'iframe per le celle della tabella: $ x ("// td", myframe);

— Adolph Trudeau

per trovare un elemento con un selettore CSS si dovrebbe usare la funzione $$ console, ad esempio $$ ('body')

— user907860

Altri comandi possono essere trovati qui: developers.google.com/chrome-developer-tools/docs/…

— Dmitry Polushkin

tornando a questa domanda dopo quasi 2 anni, sì, questa è più carina.

— Bobo

Ottimo per il debug di XPath! A proposito, la $x()funzione funziona anche nell'API della riga di comando di Safari.

— Otto G

Basta digitare l'espressione xpath nella casella di ricerca. Per me funziona nella build tip-of-tree.

La funzione sembra essere interrotta in Chrome 11, tuttavia, ho segnalato un bug su questo: http://crbug.com/79716

— Yury Semikhatsky
fonte

hai ragione. funziona ma la funzione di evidenziazione è interrotta. Sto usando Chrome 10.0. * Su Mac os X.

— Bobo

migliore risposta di Marco Polito di seguito.

— MGF

Funziona con Chrome 32. Vai alla scheda Element del devtool e premi CTRL + S e cerca xpath

— eeezyy

@eeezyy intendi ctrl + f?

— Riquadro

Per le ricerche in xpath usa $x('xpathSelector'). Per un selettore CSS utilizzare $('cssSelector').

Tuttavia, quest'ultimo selettore restituisce solo il primo elemento corrispondente. Se vuoi vedere tutti gli elementi corrispondenti, scegli$$('cssSelector')

— cham
fonte