javascript - tools - Google Chrome copia la ruta CSS en las herramientas de desarrollo

developer tools chrome quitar

Question

Las herramientas de desarrollo de Google Chrome muestran la ruta CSS (o una gran parte de ella) del elemento seleccionado en la parte inferior de la barra de herramientas. En Firebug, puedes hacer clic con el botón derecho en cualquier selector en la ruta CSS y tomar la ruta CSS hasta ese elemento. ¿Tiene Google Chrome esta característica? ¿Qué herramientas están disponibles si no hay soporte integrado?

Answer 1

Aquí hay un pequeño fragmento de código (CoffeeScript) que le dará una ruta CSS (hasta el primer elemento de identificación, aunque puede cambiarlo fácilmente eliminando la parte de ruptura):

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 '' > ''

Utiliza ": nth-child" para cada nodo, por lo que necesita modificarlo si desea obtener también nombres de clase.

Answer 2

Chrome no lo tiene, por lo que la gente ha creado extensiones de Chrome, marcadores y otras herramientas para Chrome para replicar esta funcionalidad.

Posible duplicado: Chrome equivalente de la ruta de selección de CSS de Firefox Firebug

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

Extensión de Chrome: https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi

Todavía me gustaría recibir las respuestas, sugerencias y sugerencias de otras personas sobre cómo manejar mejor esto en Chrome.

Answer 3

Puede hacer clic derecho en el elemento en la ventana de fuente principal y "Copiar ruta CSS". Esto me ha salvado la vida cuando tengo que trabajar en páginas que no puedo volver a codificar.

Answer 4

Chrome ha actualizado esta opción.

En Chrome después de la actualización reciente, esta opción ha sido cambiada de
(right click on the element in Elements Window) > Copy CSS path
a :
(right click on the element in Elements Window) > Copy > Copy selector