web-dev-qa-db-fra.com

Comment faire fonctionner les sélecteurs CSS dans les outils de développement pour Chrome 17?

Il semble que la fenêtre de recherche des outils de développement dans Chrome 17 ne correspond plus aux sélecteurs CSS. Boo. Je sais que je peux utiliser la console JS mais cela m'aide vraiment à voir les correspondances dans le contexte du DOM. Si quelqu'un sait comment je peux encore y parvenir ou sinon, comment revenir à une version précédente (c'est-à-dire celle que j'ai eu hier) de chrome je l'apprécierais).

32
Huliax

Je n'ai pas pu trouver de solution pour que les sélecteurs CSS fonctionnent à nouveau dans la barre de recherche. Réjouissez-vous, car ils sont revenus!

Dans tous les cas, vous pouvez toujours utiliser document.querySelectorAll() avec un sélecteur dans la console JS, puis cliquez avec le bouton droit sur l'un des éléments correspondants et choisissez Révéler dans le panneau Éléments et il vous montrera où il se trouve dans le DOM, tout comme avec les versions précédentes.

29
BoltClock

Une autre façon consiste à utiliser $$ dans la console, par exemple:

$$("#contents ul.features")
41
Borek Bernard

Il s'agissait d'une régression involontaire dans Chrome que nous n'avons pas capturée. Heureusement Ariel (dans les commentaires ici) a déposé un ticket et elle a été corrigée deux jours plus tard.

Si tout se passe bien, il se rendra sur le canal stable dans environ 11 semaines. Cependant la fonctionnalité est maintenant disponible en Chrome Canary , donc je recommande d'utiliser cela.

26
Paul Irish

Je vérifie les sélecteurs Css et XPath en utilisant extension Natu WebSync pour Chrome .

Ça peut:

  • diviser le sélecteur en pièces et les vérifier séparément
  • affichez en couleur le nombre d'éléments trouvés pour chaque élément de sélection. 0 - Rouge, 1 - Vert, plusieurs - Jaune
  • mettre en surbrillance des éléments sur la page lorsque je survole une partie de sélecteur
  • accédez à l'élément de sélection dans l'onglet Éléments lorsque je clique sur la partie de sélection

Il peut être très utile pour ceux qui ont besoin d'écrire et de vérifier des sélecteurs complexes.

https://chrome.google.com/webstore/detail/natu-websync/aohpgnblncapofbobbilnlfliihianac

enter image description here

0
wsbaser