Как я могу получить Селектор CSS в Chrome?

Question

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

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

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

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

Answer 1

Если Chrome Dev будет работать, если вы выберете элемент на исходной панели и нажмете правой кнопкой мыши, вы увидите параметр «Копировать путь CSS».

В более новых версияхChrome, это (right-click) > Copy > Copy selector.
Вы также можете получить XPath с (right-click) > Copy > Copy XPath

Answer 2

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

Answer 3

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

1. Открыть инструменты разработчика Chrome (cmd/ctrl + alt + j):

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

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

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

Нажмите Копировать -> Селектор копирования:

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

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

Answer 4

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

Answer 5

Иногда это необходимо сделать, если у вас очень сложная структура приложения, которую вы унаследовали, и пытаетесь отследить очень сложную проблему с глубиной вложенности CSS. Jquery Mobile Pre 1.3 будет хорошим примером этого. Загрузочные приложения и т. Д.

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