web-dev-qa-db-fra.com

Comment puis-je obtenir le sélecteur CSS dans Chrome?

Je veux pouvoir sélectionner/mettre en évidence un élément sur la page et trouver son sélecteur comme ceci:

div.firstRow div.priceAvail> div> div.PriceCompare> div.BodyS

Je sais que vous pouvez voir la sélection en bas après avoir fait un élément d'inspection, mais comment puis-je copier ce chemin dans le presse-papiers? Dans Firebug, je pense que vous pouvez le faire, mais ne voyez pas de moyen de le faire en utilisant les outils de développement Chrome et la recherche d'une extension n'a rien révélé.

C'est ce que j'essaie de faire pour plus de référence: http://asciicasts.com/episodes/173-screen-scraping-with-scrapi

google-chromeweb-scraping
34
kale

Bien qu'il ne s'agisse pas d'une extension, j'ai trouvé un bookmarklet appelé Selector Gadget qui fait exactement ce que je cherchais.

21
kale

Chrome Dev Tools CSS Path

Si Chrome Outils de développement si vous sélectionnez l'élément dans le volet source et faites un clic droit, vous verrez l'option "Copier le chemin CSS").

Dans les nouvelles versions de Chrome, c'est (right-click) > Copy > Copy selector.
Vous pouvez également obtenir le XPath avec (right-click) > Copy > Copy XPath

34
Carlos Cervantes

Le flux de travail que je suis actuellement pour obtenir des sélecteurs CSS à partir d'éléments avec la dernière Chrome version (59) est le suivant:

  1. Ouvrez Chrome Outils de développement (cmd/ctrl + alt + j)):

Step 1 - Opening Chrome Dev tools

  1. Cliquez sur l'outil de sélection d'élément dans la page (cmd/ctrl + alt + c):

Step 2 - Clicking on the select element tool in page

  1. Cliquez sur l'élément dont vous souhaitez obtenir le sélecteur afin de le visualiser dans le panneau des outils de développement:

Step 3 - Selecting the element

  1. Faites un clic droit sur l'élément dev tools:

Step 4 - Right clicking on the element

  1. Cliquez sur Copier -> Sélecteur de copie:

Step 5 - Copy selector

Ce qui me donne ce qui suit:

#question > table > tbody > tr:nth-child(1) > td.postcell > div > div.post-text > blockquote > p

7
César Alberca

Faites "Inspecter l'élément" ou Ctrl+Shift+I, c'est au TRÈS bas de l'écran. Vous pouvez également taper dans la boîte "Search Elements" en haut à droite des outils de développement si vous n'êtes pas sûr du sélecteur.

4
Francis Shanahan

Il est parfois nécessaire de le faire si vous avez une structure d'application très complexe dont vous avez hérité et que vous essayez de détecter un problème de profondeur css multi-imbriqué très délicat. Jquery mobile pre 1.3 en serait un bon exemple. Bootstrap apps etc ..

J'ai essayé l'outil ci-dessus mais je n'ai pas réussi à sélectionner le parent et les enfants d'un héritage complexe similaire à la question des affiches originales.

2
imaginethepoet