Como pesquisar elementos DOM usando seletores XPath ou CSS nas Ferramentas de desenvolvedor do Chrome?

116

O documento http://code.google.com/chrome/devtools/docs/elements.html diz que suporta seletores XPath ou CSS, mas quando tentei, não pareceu funcionar para mim.

Alguém sabe como usar?

dom google-chrome google-chrome-devtools

— Bobo
fonte

Respostas:

263

Você pode usar $xno console javascript do Chrome. Sem extensões necessárias.

ex: $x("//img")

— Matt Polito
fonte

Esta é uma resposta útil. Para adicionar a ele, a função $ x aceita um segundo argumento opcional, contexto. $ x (xpath, context) Isso permite que você selecione um conteúdo iframe em particular, por exemplo, e execute uma consulta xpath nele. Portanto, para o primeiro iframe: myframe = document.getElementsByTagName ("iframe") [0] .contentWindow.document.body; #to xpath consulta esse iframe para células da tabela: $ x ("// td", myframe);

— Adolph Trudeau

para encontrar um elemento com um seletor CSS, deve-se usar a função $$ console, por exemplo, $$ ('body')

— Dmitry Korolyov

Mais comandos podem ser encontrados aqui: developers.google.com/chrome-developer-tools/docs/…

— Dmitry Polushkin

voltando a essa questão depois de quase 2 anos, sim, esse é mais legal.

— Bobo

Muito bom para depurar XPaths! A propósito, a $x()função também funciona na API de linha de comando do Safari.

— Otto G de

Apenas digitar a expressão xpath na caixa de pesquisa deve funcionar. Funciona para mim na construção da ponta da árvore.

O recurso parece estar quebrado no Chrome 11, porém, eu registrei um bug sobre isso: http://crbug.com/79716

— Yury Semikhatsky
fonte

você está certo. está funcionando, mas o recurso de realce está quebrado. Estou usando o Chrome 10.0. * No Mac os X.

— Bobo,

melhor resposta de Mark Polito abaixo.

— FGM

Funciona com o Chrome 32. Vá para a guia Elemento do devtool e pressione CTRL + S e pesquise o xpath

— eeezyy

@eeezyy você quer dizer ctrl + f?

— Box

Para pesquisas xpath, use $x('xpathSelector'). Para uso de seletor css $('cssSelector').

No entanto, este último seletor retorna apenas o primeiro elemento correspondente. Se você quiser ver todos os elementos correspondentes, vá para$$('cssSelector')

— cham
fonte