Проверить зависший элемент в Хроме?

Я пытаюсь просмотреть с помощью инструментов разработчика Chrome, как подсказки структурированы на сайте. Однако, даже когда я завис над элементом, когда я "проверяю элемент", ничего не отображается для подсказки в html. Я знаю, что могу установить стиль :hover, но я все еще не вижу html или css подсказки.

какие идеи?

11 61
html css hover google-chrome-devtools

11 ответов:

Я на самом деле нашел трюк, чтобы сделать это с помощью подсказок Twitter Bootstrap. Если вы откроете dev tools (F12) на другом мониторе, затем наведите указатель мыши на элемент, чтобы вызвать подсказку, щелкните правой кнопкой мыши, как если бы вы выбрали "проверить элемент". Оставив это контекстное меню открытым, переместите фокус на инструменты разработчика. Html для всплывающей подсказки должен отображаться рядом с элементом его всплывающей подсказки в HTML. Тогда вы можете смотреть на него, как если бы это был другой элемент. Если вы вернетесь к Chrome HTML исчезает так просто что-то знать.

странный способ, но он работал для меня, поэтому я решил поделиться ею.

45

вам просто нужно заставить подсказку показать как таковую

$('.myelement').tooltip('open');

теперь всплывающая подсказка будет отображаться независимо от состояния зависания.

прокрутите вниз в нижней части DOM, где вы должны увидеть разметку.

обновление см. комментарий cneuro для Bootstrap 3.

$('.myelement').tooltip('show');

обновление см. ответ Марко Грешака для Chrome и, по-видимому, Safari, может использоваться в качестве ярлыка для текущего выбранный элемент. Это, кажется, работает и в Safari.

$().tooltip('show')
59

это решение работает без какого-либо дополнительного кода.

нажмите command-option-j открыть консоль. Нажмите кнопку "окно" в правом верхнем углу консоли, чтобы открыть консоль в другом окне.

затем в окне Chrome наведите указатель мыши на элемент, который запускает popover, нажмите command-` сколько раз вам нужно сосредоточиться на консоли, затем введите debugger. Это заморозит страницу, а затем вы можете проверить элемент на вкладке "элементы".

52

F8 будет пауза для отладки.

наведите указатель мыши на подсказку и нажмите F8 пока он отображается.

теперь вы можете использовать инспектор, чтобы посмотреть на экране.

40

для меня принятый ответ не сработал: щелчок в DevTools немедленно закрыл подсказку.

тем не менее, я нашел https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution что мне и помогло:

  1. в консоли: запустите: window.addEventListener('keydown', function(e) { if (e.keyCode == 123) debugger; });

  2. выделите элемент с инспектором

  3. Нажмите F12

теперь вы можете проверить элемент с помощью JavaScript сделал паузу, чтобы дом не изменился.

18

вот простое решение: если у вас есть динамические подсказки, вы можете сделать их "постоянными", (временно) изменив событие триггера на click. Это будет иметь эффект, что всплывающая подсказка исчезает только при щелчке:

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

таким образом, его можно легко проверить с помощью инструментов отладки FF или Chrome.

2

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

0

в Chome на Linux это может быть достигнуто для JS генерируемых подсказок, таких как ссылки на Википедии, выполнив следующие действия:

Как указано выше, откройте инструменты разработки с помощью F12. Открывать их в другом окне. Выделите подсказку и нажмите Ctrl-Shift-C (инспектор HTML). При перемещении по подсказке в окне dev появится соответствующий раздел.

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

в какой-то степени он также работает с подсказками bootstrap.

0

по какой-то причине ответы, представленные здесь, не работали для меня в Windows. Я смог проверить подсказку, открыв инструменты dev, затем наведя указатель мыши на элемент, который вызывает подсказку, а затем щелкнув правой кнопкой мыши на этом элементе (а не на подсказке). Затем переместите курсор на панель инспектора и прокрутите вниз до конца. Элемент tooltip все еще должен быть там.

0

нет кодового решения для JS активированных подсказок:

с инструменты разработчика в Chrome проинспектировать, содержащих / родительского элемента подсказки. На вкладке " элементы "щелкните правой кнопкой мыши на этом элементе контейнера DOM, затем выберите" break on " > "модификации поддерева". При следующем наведении курсора мыши на часть DOM, в которой размещена подсказка, код JS будет приостановлен, что позволит вам проверить содержимое подсказки.

0

стоит отметить, что переключение состояния :hover из инструментов dev влияет только в том случае, если текст подсказки включен с помощью правил CSS :hover в первую очередь. Переключатель применяет состояние наведения только к элементу для целей визуализации, но не вызывает соответствующее событие наведения мыши JavaScript.

многие фреймворки, такие как AngularJS динамически прикрепляют подсказку HTML к нижней части тела документа с помощью JavaScript, когда целевой элемент завис, поэтому любое количество наведение и проверка целевого элемента не поможет.

@joeyyang ответ работал очень хорошо для меня в этом сценарии.

-1