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

Il semble que la fenêtre de recherche de Dev Tools dans Chrome 17 ne correspond plus aux sélecteurs CSS. Huer. 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 réaliser ceci ou alternativement, comment revenir à une version précédente (c'est-à-dire celle que j'avais hier) de chrome, je l'apprécierais.Comment faire pour que les sélecteurs CSS fonctionnent dans les outils de développement pour Chrome 17?

Source

2012-02-09 Huliax

Wow, je n'a jamais eu connaissance d'une telle caractéristique. Dommage qu'ils l'aient sorti de Chrome ... Je me demande quelle raison ils avaient pour le faire. – BoltClock

Il est documenté en bas de [cette page de code Google] (http://code.google.com/chrome/devtools/docs/elements.html) ... sauf que ce n'est plus vrai pour autant que je Peut dire. – Huliax

J'utilisais cette fonctionnalité des centaines de fois par jour. Une sacrée honte – huyz

~~Je n'ai pas trouvé de solution de contournement pour que les sélecteurs CSS fonctionnent à nouveau dans la barre de recherche.~~Rejoice, for they have returned!

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

Source

2012-02-09 14:47:25 BoltClock

Cela me suffit. Merci pour l'aide. – Huliax

+16

Vous pouvez également utiliser '$$' comme raccourci au lieu de taper la totalité de 'document.querySelectorAll'. – Domenic

J'ai déposé un rapport de bug à ce sujet, merci de le mettre en vedette pour que cette fonctionnalité puisse fonctionner à nouveau: http://code.google.com/p/chrome/problèmes/détails? id = 127440 –

Il s'agit d'une régression involontaire dans Chrome que nous n'avons pas détectée. Heureusement Ariel (dans les commentaires ici) filed a ticket et il a été réparé deux jours plus tard.

Si tout va bien, il fera son chemin vers le canal stable dans environ 11 semaines. Cependant la fonctionnalité est maintenant disponible dans Chrome Canary, donc je recommande d'utiliser cela.

Source

2012-05-17 17:58:29

Génial de le revoir! Et je voudrais encore une fois upvote pour capturer votre réponse dans votre capture d'écran. – BoltClock

Hourra! Simplement rend la vie un peu plus facile. – Huliax

Une autre façon est d'utiliser $$ dans la console, par exemple:

$$("#contents ul.features")

Source

2014-03-05 11:04:53 Borek

Meilleure réponse, merci! – sidney

J'ai deux éléments d'entrée, dont l'un n'a pas d'attribut de nom. Lorsque je cherche des entrées en utilisant $$, je n'ai que l'élément qui a un attribut name. Est-ce le bon comportement ou est-ce que je manque quelque chose? Si c'est le comportement correct, alors expliquez pourquoi il retourne une entrée au lieu des deux. Merci ! – testerjoe2

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

Il peut:

sélecteur de répartition des pièces et les vérifier séparément
montrent la couleur combien d'éléments se trouvent pour chaque partie de sélecteur. 0 - Rouge, 1 - Vert, plusieurs - éléments en surbrillance jaune
sur la page quand je Hover partie de sélection
naviguer à l'élément sélecteur dans l'onglet Eléments lorsque je clique sur une 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

Source

2018-01-17 13:58:28 wsbaser

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

Répondre

Questions connexes