Как получить CSS-селектор в Chrome?

Я хочу иметь возможность выбрать/выделить элемент на странице и найти его селектор следующим образом:

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

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

Это то, что я пытаюсь сделать для дополнительной справки: http://asciicasts.com/episodes/173-screen-scraping-with-scrapi

Ответы

Ответ 1

Хотя это не расширение, я нашел букмарклет с названием Селектор гаджета, который делает именно то, что я искал.

Ответ 2

Chrome Dev Tools CSS Path

Если инструменты Chrome Dev используются, если вы выберите элемент в исходной панели и щелкните правой кнопкой мыши, вы увидите опцию "Копировать CSS-путь".

Ответ 3

Рабочий процесс, который я использую в настоящее время для получения селекторов CSS из элементов с последней версией Chrome (59), выглядит следующим образом:

  • Откройте инструменты Chrome Dev (cmd/ctrl + alt + j):

Шаг 1 - Открытие инструментов Chrome Dev

  1. Нажмите инструмент выбора элемента на странице (cmd/ctrl + alt + c):

Шаг 2 - Нажатие на инструмент элемента выбора на странице

  1. Нажмите на элемент, из которого вы хотите получить селектор, чтобы просмотреть его на панели инструментов dev:

Шаг 3 - Выбор элемента

  1. Щелкните правой кнопкой мыши элемент инструментов dev:

Шаг 4 - Щелчок правой кнопкой мыши по элементу

  1. Нажмите "Копировать" → "Селектор копирования":

Шаг 5 - Селектор копирования

Что дает мне следующее:

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

Ответ 4

Сделайте "Осмотреть элемент" или Ctrl + Shift + I, он находится в ОЧЕНЬ нижней части экрана. Вы также можете ввести поле "Элементы поиска" в правом верхнем углу инструментов dev, если не уверены в селекторе.

Ответ 5

Это нужно сделать, если у вас есть очень сложная структура приложения, которую вы унаследовали, и пытаетесь найти очень сложную проблему с множеством вложенных css-глубин. Jquery mobile pre 1.3 - хороший пример этого. Загрузочные приложения и т.д.

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