¿Cómo buscar elementos DOM usando selectores XPath o CSS en Chrome Developer Tools?

Respuestas:

263

Puede usar $xen la consola de JavaScript de Chrome. No se necesitan extensiones.

ex: $x("//img")

Matt Polito
fuente
28
Esta es una respuesta útil. Para agregarle, la función $ x acepta un segundo argumento opcional, context. $ x (xpath, context) Esto le permite seleccionar un contenido de iframe particular, por ejemplo, y ejecutar una consulta xpath en él. Entonces, para el primer iframe: myframe = document.getElementsByTagName ("iframe") [0] .contentWindow.document.body; #para xpath consultar ese iframe para celdas de tabla: $ x ("// td", myframe);
Adolph Trudeau
12
para encontrar un elemento con un selector de CSS, uno debe usar la función de consola $$, por ejemplo, $$ ('cuerpo')
user907860
3
Se pueden encontrar más comandos aquí: developers.google.com/chrome-developer-tools/docs/…
Dmitry Polushkin
volviendo a esta pregunta después de casi 2 años, sí, esta es mejor.
Bobo
¡Muy bueno para depurar XPaths! Por cierto, la $x()función también funciona en la API de línea de comandos de Safari.
Otto G
15

Simplemente escribir la expresión xpath en el cuadro de búsqueda debería funcionar. Me funciona en la construcción de punta de árbol.

Sin embargo, la función parece estar rota en Chrome 11, he presentado un error en esto: http://crbug.com/79716

Yury Semikhatsky
fuente
tienes razón. está funcionando pero la función de resaltado está rota. Estoy usando Chrome 10.0. * En Mac os X.
Bobo
mejor respuesta de Mark Polito a continuación.
FGM
Funciona con Chrome 32. Vaya a la pestaña Elemento de la herramienta devtool y presione CTRL + S y busque el xpath
eeezyy
@eeezyy, ¿te refieres a ctrl + f?
Box
3

Para búsquedas de xpath, utilice $x('xpathSelector'). Para un uso de selector de CSS $('cssSelector').

Sin embargo, este último selector devuelve solo el primer elemento coincidente. Si desea ver todos los elementos coincidentes, elija$$('cssSelector')

cham
fuente