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