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

Question

Le doc http://code.google.com/chrome/devtools/docs/elements.html Il est indiqué qu'il prend en charge les sélecteurs XPath ou CSS, mais lorsque j'ai essayé, cela n'a pas semblé fonctionner pour moi.

Quelqu'un sait-il comment l'utiliser ?

Answer 1

Vous pouvez utiliser $x dans la console javascript de Chrome. Aucune extension n'est nécessaire.

ex : $x("//img")

Answer 2

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

Cette fonctionnalité semble toutefois ne pas fonctionner dans Chrome 11. J'ai signalé un bogue à ce sujet : http://crbug.com/79716

Answer 3

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

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

Answer 4

Si vous cliquez sur un élément du volet des éléments puis tapez command-F, une barre de recherche s'ouvre et vous permet de rechercher des éléments à l'aide de sélecteurs xpath.