Google Chrome скопируйте CSS-путь в Инструменты разработчика

инструменты разработчика Google Chrome показывают путь CSS (или большую его часть) выбранного элемента в нижней части панели инструментов. В Firebug вы можете щелкнуть правой кнопкой мыши на любом селекторе в пути CSS и захватить путь CSS до этого элемента. Есть ли у Google Chrome эта функция? Какие инструменты доступны, если нет встроенной поддержки?

Chrome CSS Path

24
css google-chrome javascript web-developer-toolbar

4 ответов

Chrome обновил эту опцию

в chrome после недавнего обновления эта опция была изменена с
(right click on the element in Elements Window) > Copy CSS path
кому:
(right click on the element in Elements Window) > Copy > Copy selector

14

вы можете щелкнуть правой кнопкой мыши по элементу в главном окне источника и "скопировать путь CSS". Это было спасением жизни, когда я должен работать над страницами, которые я не могу перекодировать.

4

Chrome не имеет его, поэтому люди сделали расширения chrome, букмарклеты и другие инструменты для Chrome для репликации этой функции.

возможные дубликаты: Chrome эквивалент Firefox Firebug CSS выберите путь

букмарклет: http://www.selectorgadget.com/

Расширение Chrome : https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi

Я все равно хотел бы другого ответы людей, предложения и советы о том, как лучше справиться с этим в Chrome.

4

вот небольшой фрагмент (CoffeeScript), который даст путь CSS (до первого элемента id - хотя вы можете легко изменить это, удалив часть 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 ' > '

использует ": nth-child " для каждого узла, поэтому вам нужно изменить его, если вы хотите получить также имена классов.

2