Я пытаюсь просмотреть через инструменты разработчика Chrome, как всплывающие подсказки структурируются на сайте. Однако, даже когда я завис над элементом, когда я "проверяю элемент", ничто не показывает для всплывающей подсказки в html. Я знаю, что могу установить стиль :hover, но я все еще не вижу html или css всплывающей подсказки.
Любые идеи?
Я действительно нашел трюк, чтобы сделать это с помощью подсказок Twitter Bootstrap. Если вы откроете инструменты разработчика (F12) на другом мониторе, затем наведите указатель мыши на элемент, чтобы открыть всплывающую подсказку, щелкнув правой кнопкой мыши, как будто вы должны выбрать "Осмотреть элемент". Оставляя это контекстное меню открытым, переместите фокус на инструменты dev. В html для всплывающей подсказки должен появиться рядом с элементом его всплывающая подсказка для HTML. Тогда вы можете смотреть на него, как на другой элемент. Если вы вернетесь в Chrome, HTML исчезнет, просто что-то, о чем нужно знать.
Какой-то странный способ, но это сработало для меня, поэтому я решил поделиться им.
Это решение работает без дополнительного кода.
Нажмите command-option-j, чтобы открыть консоль. Нажмите кнопку окна в правом верхнем углу консоли, чтобы открыть консоль в другом окне.
Затем в окне Chrome наведите указатель мыши на элемент, запускающий popover, нажмите command-`, но много раз вам нужно сосредоточиться на консоли, затем введите debugger. Это заморозит страницу, после чего вы сможете проверить элемент на вкладке "Элементы".
Вам просто нужно заставить всплывающую подсказку показать как таковую
$('.myelement').tooltip('open');
Теперь всплывающая подсказка покажет независимо от состояния зависания.
Прокрутите вниз до нижней части DOM, где вы увидите разметку.
Обновить см. комментарий cneuro для Bootstrap 3.
$('.myelement').tooltip('show');
Обновить см. комментарий Марко Грешака для Chrome и, по-видимому, Safari, $0 можно использовать как ярлык для выбранного в данный момент элемента. Это также работает в Safari.
$($0).tooltip('show')
F8 приостанавливает отладку.
Наведите курсор на всплывающую подсказку и нажмите F8, пока он отображается.
Теперь вы можете использовать инспектора для просмотра CSS.
Для меня принятый ответ не сработал: нажатие на DevTools сразу же закрыло ToolTip.
Однако я нашел https://superuser.com/questions/249050/chrome-keyboard-shortcut-to-pause-script-execution, который помог мне:
window.addEventListener('keydown', function(e) {
if (e.keyCode == 123) debugger;
});
Выделите элемент с инспектором
Хит F12
Теперь вы можете проверить элемент, когда JavaScript приостановлен, поэтому DOM не изменится.
Ответ в одном окне, без кодирования
Ни один из других ответов не совсем правильный, или не достаточно подробный, поэтому здесь моя попытка.
<div> в <body>Нет кода для подсказок, активированных JS:
С помощью Chrome devtools проверьте содержащий/родительский элемент всплывающей подсказки. На вкладке "элементы" щелкните правой кнопкой мыши на этом элементе DOM контейнера и выберите "разбить на"> "модификации поддерева". В следующий раз, когда вы наведете курсор на часть DOM, в которой находится всплывающая подсказка, код JS будет приостановлен, что позволит вам проверить содержимое подсказки.
Вот простое решение. Если у вас есть динамические всплывающие подсказки, вы можете сделать их "постоянными" (временно), изменив событие триггера на click. Это приведет к тому, что всплывающая подсказка исчезнет только после щелчка:
$('body').tooltip({
selector: "[data-toggle='tooltip']",
trigger: "click"
});
Таким образом, его можно легко проверить с помощью инструментов отладки FF или Chromes.
Нажмите f12, перейдите на вкладку консоли и добавьте следующее:
setTimeout(()=> {debugger},5000)
Это даст вам 5 секунд, чтобы сделать все, что вы хотите, и это сломается в 5 seconds. Затем вы можете проверить целевой элемент
(например, наведите элемент и подождите 5 секунд, затем осмотрите..)
У меня были проблемы с этим, поэтому я пошел в документацию и проверил всплывающую подсказку, которая уже отображается на странице. Это помогло мне увидеть структуру dom tooltip и отредактировать ее соответственно.
В Chome Linux это может быть достигнуто для всплывающих подсказок JS, таких как ссылки на WikiPedia, путем выполнения следующих действий:
Как указано выше, откройте инструменты dev, используя F12. Откройте их в другом окне. Выделите всплывающую подсказку и нажмите Ctrl-Shift-C (Инспектор HTML). Когда вы переходите по кончику, окно dev отобразит соответствующий раздел.
Если вам нужно держать подсказку открытой, когда вы ее отключаете, чтобы более подробно ее проверить в другом окне, затем щелкните правой кнопкой мыши всплывающую подсказку и оставьте контекстное меню вверх, а затем нажмите на инструменты dev окно. В этом случае он оставляет подсказку в окне википедии.
В какой-то степени он также работает с подсказками бутстрапа.
По некоторым причинам ответы, представленные здесь, не работали для меня в Windows. Я смог проверить всплывающую подсказку, открыв инструменты dev, затем нависая над элементом, который вызывает всплывающую подсказку, а затем щелкнул правой кнопкой мыши по этому элементу (а не всплывающей подсказке). Затем переместите курсор на панель инспектора и прокрутите вниз. Элемент tooltip все равно должен быть там.
1) Откройте окно проверки, нажав F12
2) Перейти на вкладку источника (рядом с консолью)
3) Теперь наведите курсор на элемент, который нужно осмотреть, и держите там мышь.
4) Использование клавиатуры (Tab или Shift + Tab), чтобы переместить элемент управления на кнопку паузы или F8. См. Изображение
5) Когда клавиатура фокусируется на кнопке воспроизведения. Нажмите Enter. Ваш элемент зависания будет заморожен, теперь вы можете делать все, что угодно
Утилиты dev предоставляют способ проверки элемента, на который указывает объект, например всплывающей подсказки.
1 - Откройте инструменты разработчика с помощью F12.
2 - Выберите вкладку "Элементы".
3 - Выберите родительский элемент, содержащий подсказку.
4 - Нажмите "..." (в строке родительского элемента) и после выберите "Разбить на"/"Изменения поддерева" (см. изображение ниже)
5 - Наконец, вернитесь в приложение и сделайте всплывающую подсказку. Он должен блокировать выполнение после того, как подсказка станет видимой
Надеюсь, что это может быть полезно для кого-то!
Выполните следующие действия
Откройте окно Inspect в Chrome.
Наведите указатель мыши на подсказку.
Нажмите F8
Выполнение JS будет приостановлено, а затем вы сможете просмотреть подсказку.
Снова нажмите F8, чтобы начать выполнение, и F10, чтобы отладить.
Стоит отметить, что переключить состояние: hover из инструментов Dev только оказывает влияние, если текст подсказки включен с помощью правил CSS: hover. Переключатель только применяет состояние зависания к элементу для целей рендеринга, но не вызывает соответствующее событие JavaScript-указателя мыши.
Многие фреймворки, такие как AngularJS, динамически присоединяют всплывающую подсказку HTML к нижней части тела документа через JavaScript, когда объект-элемент завис, поэтому любое количество зависания и проверки целевого элемента не поможет.
Ответ @joeyyang работал очень хорошо для меня в этом сценарии.
