¿Cómo puedo obtener el selector de CSS en Chrome?

Quiero ser capaz de seleccionar/resaltar un elemento de la página y encontrar su selector de la siguiente manera:¿Cómo puedo obtener el selector de CSS en Chrome?

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

Sé que puede ver la selección en la parte inferior después de hacer un elemento de inspección, pero ¿cómo puedo copiar esta ruta al portapapeles? En Firebug creo que puedes hacer esto, pero no veo la manera de hacerlo con las Herramientas de desarrollo de Chrome y la búsqueda de una extensión no generó nada.

Esto es lo que estoy tratando de hacer desde hace más referencia: http://asciicasts.com/episodes/173-screen-scraping-with-scrapi

Fuente

2010-12-21 kale

Aunque no es una extensión, sí encontré un bookmarklet llamado Selector Gadget que hace exactamente lo que estaba buscando.

Fuente

2010-12-21 17:13:55 kale

Parece que ahora también es una extensión de Chrome https://chrome.google.com/webstore/detail/selectorgadget/mhjhnkcfbdhnjickkkdbjoemdmbfginb –

No "Inspeccionar elemento" o Ctrl + Shift + I, es en el fondo muy de la pantalla . También puede escribir en el cuadro "Buscar elementos" en la parte superior derecha de las herramientas de desarrollo si no está seguro sobre el selector.

Fuente

2010-12-21 15:03:42

Lo siento, no fue lo suficientemente claro Sé que está en la parte inferior, pero quiero una forma de copiarlo/pegarlo (usando el formato de selector) ya que necesito hacer esto para una cantidad de elementos. – kale

Desafortunadamente no estoy seguro de una manera de hacer esto. No estoy seguro de por qué querrías hacer eso tampoco, ya que probablemente quieras aplicar algo de "limpieza" al selector que te dará Firebug/Chrome. P.ej. no querrá iniciar cada selector en su CSS con "html.body.div" cuando en su lugar solo puede decir "div". Lo siento no puede ayudar. –

En ocasiones es necesario hacerlo si tiene una estructura de aplicación muy compleja que heredó y está intentando rastrear un problema de profundidad de CSS muy complejo y anidado. Jquery mobile pre 1.3 sería un buen ejemplo de esto. Bootstrap aplicaciones, etc.

Probé la herramienta anterior, pero no pude conseguir eso para seleccionar realmente el padre completo y los hijos de una herencia compleja similar a la pregunta de los carteles originales.

Fuente

2013-12-03 19:42:48 imaginethepoet

Chrome Dev Tools CSS Path

Si las herramientas de Chrome Dev si selecciona el elemento en el panel de origen y haga clic derecho, entonces usted verá la opción "Copia CSS trayectoria".

Fuente

2015-05-21 18:36:56 CarlosCervantes

No tengo esta opción en mi cromo –

Ahora se llama Copiar Selector – TomC

'Right click> Copiar > Copiar selector' en Chrome 61 – OscarRyz