Javascript Girl
  1. Javascript Girl
  3. Google Chrome copie le chemin CSS dans les outils de développement
Intereting Posts
Comment puis-je formater un nombre entier à une longueur spécifique dans javascript? Comment puis-je détecter une modification de la barre d'adresse avec JavaScript? Comment puis-je supprimer la partie décimale du numéro JavaScript? JQTouch exécute le code lorsque la page AJAX est chargée Comment puis-je trouver l'emplacement du curseur (X / Y, pas ligne / colonne) dans une zone de texte HTML? Le premier éditeur TinyMCE ajouté dynamiquement, d'autres ne le font pas Qu'est-ce que var x = x || {}; Quels sont les rappels dans ReactTransitionGroup hooks? Live ('clic') et performance Désactiver glisser / déposer dans QtWebkit Comment décharger l'image lorsqu'elle n'est pas «en vue» pour économiser de la mémoire? Comment supprimer l'échappement de la barre oblique inverse à partir d'une var javascript? Comment puis-je chaîner mon propre JavaScript dans le côté client sans perdre la fonctionnalité PostBack Problème de cryptage avec PHP (openssl_encrypt), puis décryptage avec JS (CryptoJS) JavaScript Event Listener pour Update / Change sur Element / innerText

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

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

Chemin CSS Chrome

Vous pouvez cliquer avec le bouton droit de la souris sur l'élément dans la fenêtre source principale et "Copier le chemin CSS". Cela a été un économiseur de vie quand je dois travailler sur des pages que je ne peux pas coder de nouveau.

Chrome a mis à jour cette option

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

Chrome ne l'a pas, de sorte que les utilisateurs ont créé des extensions chrome, des bookmarklets et d'autres outils pour que Chrome reproduise cette fonctionnalité.

Possible duplicate: équivalent Chrome de Firefox Firebug CSS select path

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

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

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

Voici un petit extrait (CoffeeScript) qui donnera un chemin CSS (jusqu'au premier élément id – bien que vous puissiez facilement le modifier 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 noeud, donc vous devez le modifier si vous souhaitez également recevoir des noms de classe.