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é?
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
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.
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.
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.