web-dev-qa-db-fra.com

Google Chrome copier le chemin CSS dans les outils de développement

Les outils de développement de Google Chrome affichent le chemin CSS (ou une grande partie de celui-ci) de l'élément sélectionné au bas de la barre d'outils. Dans Firebug, vous pouvez cliquer avec le bouton droit sur n'importe quel sélecteur dans le chemin CSS et saisir le chemin CSS jusqu'à cet élément. Google Chrome possède-t-il cette fonctionnalité? Quels outils sont disponibles s'il n'y a pas de support intégré?

Chrome CSS Path

javascriptcssgoogle-chromeweb-developer-toolbar
26
MattDiamant

Chrome a mis à jour cette option

Dans chrome après la récente mise à jour, cette option a été modifiée de
(right click on the element in Elements Window) > Copy CSS path
à :
(right click on the element in Elements Window) > Copy > Copy selector

15
Ali Arslan

Vous pouvez faire un clic droit sur l'élément dans la fenêtre source principale et "Copier le chemin CSS". Cela m'a sauvé la vie lorsque je dois travailler sur des pages que je ne peux pas recoder.

4
Erik

Chrome ne l'a pas, donc les gens ont créé chrome extensions, bookmarklets et autres outils pour Chrome pour reproduire cette fonctionnalité).

Copie possible: équivalent Chrome du chemin de sélection CSS de Firefox Firebug

Bookmarklet: http://www.selectorgadget.com/

Extension Chrome: https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi

J'aimerais toujours obtenir les réponses, suggestions et conseils d'autres personnes sur la meilleure façon de gérer cela dans Chrome.

4
MattDiamant

Voici un petit extrait (CoffeeScript) qui donnera le chemin CSS (jusqu'au premier élément id - bien que vous puissiez facilement changer cela en supprimant la partie break):

getCSSPath = (node)->
  parts = []
  while node.parentElement
    str = node.tagName
    if node.id
      str += "##{node.id}"
      parts.unshift str
      break
    siblingsArr = Array.prototype.slice.call(node.parentElement.childNodes)
    ind = siblingsArr.filter((n)-> n.attributes?).indexOf(node)
    parts.unshift str + ":nth-child(#{ind + 1})"
    node = node.parentElement
  parts.join ' > '

Utilise ": nth-child" pour chaque nœud, vous devez donc le modifier si vous souhaitez obtenir également des noms de classe.

2
JussiR