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

116

El documento http://code.google.com/chrome/devtools/docs/elements.html dice que admite selectores XPath o CSS, pero cuando lo intenté, no pareció funcionar para mí.

¿Alguien sabe cómo usarlo?

dom google-chrome google-chrome-devtools

— Bobo
fuente

Respuestas:

263

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

ex: $x("//img")

— Matt Polito
fuente

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

para encontrar un elemento con un selector de CSS, uno debe usar la función de consola $$, por ejemplo, $$ ('cuerpo')

— user907860

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

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

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