Стоп-экран в 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

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

  1. Перейдите на нужную страницу
  2. Откройте консоль разработчика - F12в Windows / Linux или option+ ⌘+ Jв macOS
  3. Выберите Sourcesвкладку в Chrome Inspector
  4. В окне веб-браузера наведите курсор на нужный элемент, чтобы запустить всплывающее окно
  5. Нажмите F8на Windows / Linux (или fn+ F8на macOS), пока отображается всплывающее окно. Если вы щелкнули где-нибудь на текущей странице, F8 ничего не сделает. Ваш последний клик должен быть где-то в инспекторе, например, на вкладке источников
  6. Перейти на Elementsвкладку в инспекторе
  7. Найдите свой поповер (он будет вложен в HTML-код триггерного элемента)
  8. Получайте удовольствие от модификации 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)
Надеюсь, это кому-нибудь поможет!

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

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

frzsombor
источник
11
Привет! Отличная идея ... вам даже не нужно добавлять дополнительный div ... Просто запустите этот javascript вместо этого setTimeout(function(){debugger;}, 5000);, затем покажите свой элемент и подождите, пока он не сломается в отладчике. Затем нажмите вкладку «Элементы» в Chrome Inspector, и вы сможете найти свой элемент там. Вы также можете щелкнуть значок «Найти элемент» (выглядит как увеличительное стекло), и Chrome позволит вам пойти и осмотреть и найти свой элемент на странице, щелкнув по нему правой кнопкой мыши и выбрав «Проверить элемент».
Брэд Паркс
5
Я думаю, что вы должны добавить это как ответ, потому что это решение не просто лучше, чем мое, но лучше, чем все остальные здесь. Действительно мило!
frzsombor
38
  1. Щелкните правой кнопкой мыши в любом месте вкладки элементов
  2. выбирать Breakon... > subtree modifications
  3. Запустите всплывающее окно, которое вы хотите увидеть, и оно остановится, если увидит изменения в DOM
  4. Если вы по-прежнему не видите всплывающее окно, нажимайте 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

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

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

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

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