Comment rechercher des éléments DOM à l'aide de sélecteurs XPath ou CSS dans les outils de développement Chrome?

116

Le document http://code.google.com/chrome/devtools/docs/elements.html dit qu'il prend en charge les sélecteurs XPath ou CSS, mais lorsque j'ai essayé, cela ne semblait pas fonctionner pour moi.

Quelqu'un sait comment l'utiliser?

dom google-chrome google-chrome-devtools Bobo
la source

Réponses:

263

Vous pouvez utiliser $xdans la console javascript Chrome. Aucune extension nécessaire.

ex: $x("//img")

Matt Polito
la source

C'est une réponse utile. Pour y ajouter, la fonction $ x accepte un deuxième argument optionnel, context. $ x (xpath, context) Cela vous permet de sélectionner un contenu iframe particulier, par exemple, et d'exécuter une requête xpath dessus. Donc, pour le premier iframe: myframe = document.getElementsByTagName ("iframe") [0] .contentWindow.document.body; #to xpath interroge cette iframe pour les cellules du tableau: $ x ("// td", myframe);

Adolph Trudeau

pour trouver un élément avec un sélecteur CSS, il faut utiliser la fonction de console $$, par exemple $$ ('body')

user907860

Plus de commandes peuvent être trouvées ici: développeurs.google.com

chrome-

revenant à cette question après presque 2 ans, ouais celle-ci est plus jolie.

Bobo

Très bon pour le débogage des XPath! À propos, la $x()fonction fonctionne également dans l'API de ligne de commande Safari.

Otto G

Il suffit de taper l'expression xpath dans la zone de recherche. Cela fonctionne pour moi dans la version tip-of-tree.

La fonctionnalité semble être cassée dans Chrome 11 cependant, j'ai déposé un bogue à ce sujet: http://crbug.com/79716

Yury Semikhatsky
la source

vous avez raison. cela fonctionne mais la fonction de mise en évidence est cassée. J'utilise chrome 10.0. * Sur Mac OS X.

Bobo

meilleure réponse par Mark Polito ci-dessous.

FGM

Cela fonctionne avec Chrome 32. Accédez à l'onglet Élément du devtool et appuyez sur CTRL + S et recherchez le xpath

eeezyy

@eeezyy vous voulez dire ctrl + f?

Boîte du

Pour les recherches xpath, utilisez $x('xpathSelector'). Pour un sélecteur css, utilisez $('cssSelector').

Cependant, ce dernier sélecteur ne renvoie que le premier élément correspondant. Si vous voulez voir tous les éléments correspondants, optez pour$$('cssSelector')

cham
la source