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

Outils de développement de Google Chrome affiche 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. Est-ce que Google Chrome a cette fonctionnalité? Quels outils sont disponibles s'il n'y a pas de support intégré?

Chemin CSS Chrome

24
demandé sur MattDiamant 2013-03-12 23:02:35

4 réponses

Chrome a mis à jour cette option

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

14
répondu Ali Arslan 2016-02-15 14:59:20

Vous pouvez faire un clic droit sur l'élément dans la fenêtre source principale et "copier le chemin CSS". Cela a été une économie de vie quand je dois travailler sur des pages que je ne peux pas recoder.

4
répondu Erik 2015-04-16 20:19:44

Chrome ne l'a pas, donc les gens ont fait des extensions chrome, bookmarklets, et d'autres outils pour Chrome de reproduire cette fonctionnalité.

Doublon Possible: Chrome équivalent de Firefox Firebug CSS sélectionner le chemin d'accès

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

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

J'aimerais toujours les réponses, les suggestions et les conseils des autres sur comment mieux faire face à cela dans Chrome.

4
répondu MattDiamant 2017-05-23 12:25:26

Voici un petit extrait (CoffeeScript) qui donnera le chemin CSS (jusqu'au premier élément id - bien que vous puissiez facilement le changer 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
répondu JussiR 2015-02-09 11:23:03