teclado other inspeccionar guardar extension elemento chrome cambios google-chrome web-scraping

google-chrome - other - inspeccionar elemento chrome teclado



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

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

Quiero poder seleccionar / resaltar un elemento en la página y encontrar su selector de esta manera:

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 una manera de hacerlo usando las Herramientas para desarrolladores de Chrome y buscar una extensión no resultó nada.

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

El flujo de trabajo que actualmente sigo para obtener los selectores de CSS de elementos con la última versión de Chrome (59) es el siguiente:

  1. Abra las herramientas Chrome Dev ( cmd/ctrl + alt + j ):

  1. Haga clic en la herramienta Seleccionar elemento en la página ( cmd/ctrl + alt + c ):

  1. Haga clic en el elemento del que desea obtener el selector para verlo en el panel de herramientas de desarrollo:

  1. Haga clic derecho en el elemento de herramientas de desarrollo:

  1. Haga clic en Copiar -> Copiar selector:

Lo que me da lo siguiente:

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

En algún momento es necesario hacer esto si tienes una estructura de aplicación muy compleja que hayas heredado y estás tratando de localizar un problema muy complejo de profundidad de CSS. Jquery mobile pre 1.3 sería un buen ejemplo de esto. Aplicaciones de arranque, etc.

Probé la herramienta anterior, pero no pude obtener eso para seleccionar realmente a los padres e hijos completos de una herencia compleja similar a la pregunta de los carteles originales.

Haga "Inspeccionar elemento" o Ctrl + Shift + I , se encuentra en la parte inferior de la pantalla. También puede escribir en el cuadro "Elementos de búsqueda" en la parte superior derecha de las herramientas de desarrollo si no está seguro acerca del selector.

Si selecciona Chrome Dev herramientas, si selecciona el elemento en el panel de origen y hace clic con el botón derecho, verá la opción "Copiar ruta CSS".

En las versiones más recientes de Chrome, esto es (right-click) > Copy > Copy selector .
También puede obtener el XPath con (right-click) > Copy > Copy XPath