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

Respostas:

263

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

ex: $x("//img")

Matt Polito
fonte
28
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
12
para encontrar um elemento com um seletor CSS, deve-se usar a função $$ console, por exemplo, $$ ('body')
Dmitry Korolyov
3
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
15

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
3

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