Стоп-экран в Chrome Debugger / DevTools панель для проверки поповера?

394

Я использую Chrome Инспектор, чтобы попытаться проанализировать z-indexзагрузочный щебетать в твиттере, и нахожу его крайне разочаровывающим ...

Есть ли способ заморозить всплывающее окно (пока показано), чтобы я мог оценить и изменить связанный CSS?

Размещение фиксированного «наведения» на связанной ссылке не приводит к появлению всплывающего окна.

css google-chrome google-chrome-devtools

— Аврам
источник

7

Попробуйте установить debugger;

— точку

5

Я использую window.setTimeoutдля запуска debuggerв течение 5 секунд, затем наведите курсор на элемент и подождите.

— Grimmdude

Здравствуйте, технический писатель DevTools здесь. Можете ли вы выслать мне MVCE, демонстрирующие проблему? По состоянию на 2019 год у нас есть несколько инструментов, которые должны справиться с задачей ( точки останова прослушивателя событий , переключатели псевдоклассов ), но я не могу дать подробный ответ, пока не смогу воспроизвести вашу ситуацию.

— Kayce басков

Вы можете найти другое решение здесь для Chrome и Firefox

— Мухаммед AbdElFatah

@KayceBasques Вот пример: telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist Нажмите на раскрывающийся список, чтобы открыть его, затем попробуйте проверить всплывающее окно с содержимым списка в представлении «Элементы».

— RMorrisey

704

Получил это работает. Здесь была моя процедура:

Перейдите на нужную страницу
Откройте консоль разработчика - F12в Windows / Linux или option+ ⌘+ Jв macOS
Выберите Sourcesвкладку в Chrome Inspector
В окне веб-браузера наведите курсор на нужный элемент, чтобы запустить всплывающее окно
Нажмите F8на Windows / Linux (или fn+ F8на macOS), пока отображается всплывающее окно. Если вы щелкнули где-нибудь на текущей странице, F8 ничего не сделает. Ваш последний клик должен быть где-то в инспекторе, например, на вкладке источников
Перейти на Elementsвкладку в инспекторе
Найдите свой поповер (он будет вложен в HTML-код триггерного элемента)
Получайте удовольствие от модификации CSS

— Аврам
источник

9

Этот рабочий процесс дал мне краткое, полезное введение в отладчик точек останова и помог изолировать меню, которое было трудно стилизовать, так как оно исчезало при щелчке консоли.

— Тревор Пирс

22

Если элемент DOM использует событие focusout, чтобы скрыть, у вас нет шансов нажать F8!

— Марсель

2

@ Декан, чтобы вызвать F8 вам нужно использовать fn!

— mik01aj

10

Для получения дополнительной информации F8ярлык фактически приостанавливает отладчик (выполнение сценария). И ctrl + \ тоже работает. ( cmd + \ в MacOS).

— Леон - Хан Ли,

1

Или вы можете нажать F8дважды

— samdd

275

Для проверки любого элемента сделайте следующее. Это должно работать, даже если трудно дублировать состояние наведения:

Запустите следующий javascript в консоли. Это сломается в отладчике через 5 секунд.

setTimeout(function(){debugger;}, 5000)
Идите, покажите свой элемент (при наведении курсора или как-то еще) и подождите, пока Chrome не взломает отладчик.
Теперь нажмите на Elementsвкладку в Chrome Inspector, и вы сможете найти свой элемент там.
Вы также можете нажать на Find Elementзначок (выглядит как увеличительное стекло), и Chrome позволит вам пойти и осмотреть и найти свой элемент на странице, щелкнув по нему правой кнопкой мыши и выбравInspect Element

Обратите внимание, что этот подход немного отличается от другого отличного ответа на этой странице.

— Брэд Паркс
источник

7

Я уважаю, что вы должным образом уважали ответ frzsombor. отлично.

— Джереми Мориц

4

Это то, что мне было нужно, поскольку функциональность была вызвана тем, что элемент DOM был добавлен в js Focus и удален при размытии, что всегда происходит при переключении на инструменты dev.

— trudesign

6

Решение Абрама F8 у меня не сработало. Этот сделал. Спасибо!

— Ральф

3

Спасибо. Я сделал закладку с названием : ❚❚, адрес : javascript:debugger;. F8работает, но для тех, кто предпочитает использовать мышь, это может быть более удобным.

— Tymek

1

Как прокомментировали другие, ответ F8 не работал для меня и сводил меня с ума! Это работает как шарм. Спасибо!

— DoYouEvenCodeBro

70

ОБНОВЛЕНИЕ: Как написал Брэд Паркс в своем комментарии, есть намного лучшее и более простое решение с одной строкой кода JS:

запустить setTimeout(function(){debugger;},5000);, затем показать свой элемент и подождать, пока он не сломается в отладчике

Оригинальный ответ:

У меня просто была такая же проблема, и я думаю, что нашел «универсальное» решение. (при условии, что сайт использует jQuery)
Надеюсь, это кому-нибудь поможет!

Перейти на вкладку элементов в инспекторе
Щелкните правой кнопкой мыши <body>и выберите « Изменить как HTML »
Добавьте следующий элемент после, <body>затем нажмите Ctrl + Enter:
<div id="debugFreeze" data-rand="0"></div>
Щелкните правой кнопкой мыши этот новый элемент и выберите «Разбить на ...» -> «Изменение атрибутов».
Теперь перейдите в представление консоли и выполните следующую команду:
setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
Теперь вернитесь к окну браузера, и у вас есть 5 секунд, чтобы найти свой элемент и щелкнуть / hover / focus / etc, прежде чем будет достигнута точка останова и браузер "зависнет".
Теперь вы можете спокойно проверить элемент, на который нажали / наведен / сфокусирован / и т.д.

Конечно, вы можете изменить javascript и время, если вы поняли идею.

— frzsombor
источник

11

Привет! Отличная идея ... вам даже не нужно добавлять дополнительный div ... Просто запустите этот javascript вместо этого setTimeout(function(){debugger;}, 5000);, затем покажите свой элемент и подождите, пока он не сломается в отладчике. Затем нажмите вкладку «Элементы» в Chrome Inspector, и вы сможете найти свой элемент там. Вы также можете щелкнуть значок «Найти элемент» (выглядит как увеличительное стекло), и Chrome позволит вам пойти и осмотреть и найти свой элемент на странице, щелкнув по нему правой кнопкой мыши и выбрав «Проверить элемент».

— Брэд Паркс

5

Я думаю, что вы должны добавить это как ответ, потому что это решение не просто лучше, чем мое, но лучше, чем все остальные здесь. Действительно мило!

— frzsombor

38

Щелкните правой кнопкой мыши в любом месте вкладки элементов
выбирать Breakon... > subtree modifications
Запустите всплывающее окно, которое вы хотите увидеть, и оно остановится, если увидит изменения в DOM
Если вы по-прежнему не видите всплывающее окно, нажимайте Step over the next function(F10)кнопку рядом Resume(F8)с верхним верхним центром хрома, пока не остановите всплывающее окно, которое хотите увидеть.

— Адриан Энрикес
источник

3

БЛАГОДАРЮ ВАС! Я не знал этого, и это спасло меня

— R Claven

14

Я обнаружил, что это очень хорошо работает в Chrome.

Щелкните правой кнопкой мыши по элементу, который вы хотите проверить, затем выберите Force Element State> Hover. Скриншот прилагается.

Состояние силового элемента

— Лия Хайге
источник

5

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

— mik01aj

6

Поместите это на вкладку консоли:

setTimeout(function(){debugger;}, 5000)

Затем нажмите, где показать всплывающее окно, через 5 секунд - экран будет заморожен и получайте удовольствие от настройки CSS.

— Паркер Лученцо
источник

0

Мой простой способ:

setTimeout(function(){ debugger; }, 3000);

— Надав Б
источник

7

Это точно так же, как и решение Брэда Паркса, опубликованное 3 года назад

— frzsombor

-2

Я попробовал другие решения здесь, они работают, но я ленивый, так что это мое решение

наведите курсор на элемент, чтобы вызвать расширенное состояние
ctrl+ shift+c
снова наведите курсор на элемент
щелкните правой кнопкой мыши
перейти к отладчику

при щелчке правой кнопкой мыши по нему больше не регистрируется событие мыши, так как всплывающее контекстное меню позволяет безопасно перемещать мышь

— Винсент Тан
источник