Заморозить экран в отладчике Chrome / панели DevTools для инспекции поповера?
Я использую Chrome Inspector, чтобы проанализировать значение z-index у всплывающего окна (popover) в Twitter Bootstrap, и это доставляет мне большие неудобства.
Существует ли способ "заморозить" всплывающее окно (пока оно открыто), чтобы я мог оценить и изменить связанный CSS?
Попытка установить фиксированный "hover" на связанной ссылке не приводит к тому, что всплывающее окно появляется.
5 ответ(ов)
Успех! Вот что я сделал:
- Перейдите на нужную страницу.
- Откройте консоль разработчика - на Windows/Linux используйте
F12, а на macOS -Cmd + Option + I. - Выберите вкладку
Sourcesв инспекторе Chrome. - В окне браузера наведите курсор на нужный элемент, чтобы вызвать всплывающее окно.
- Нажмите
F8на Windows/Linux (илиCmd + \на macOS), пока всплывающее окно активно. Если вы кликнули где-то на самой странице,F8ничего не сделает. Ваш последний клик должен быть в инспекторе, например, на вкладке Sources. - Перейдите на вкладку
Elementsв инспекторе. - Найдите ваше всплывающее окно (оно будет вложено в HTML триггерного элемента).
- Удачи с модификацией CSS!
ОБНОВЛЕНИЕ: Как написал Брэд Паркс в своем комментарии, есть гораздо лучшее и простое решение всего лишь одной строкой кода на JS:
Выполните команду
setTimeout(function(){debugger;},5000);, затем покажите ваш элемент и дождитесь, пока не сработает отладчик.
Исходный ответ:
Я только что столкнулся с подобной проблемой и, похоже, нашел "универсальное" решение. (при условии, что сайт использует jQuery)
- Перейдите на вкладку "Elements" в инструментах разработчика.
- Щелкните правой кнопкой мыши на
<body>и выберите "Edit as HTML". - После
<body>добавьте следующий элемент и нажмите Ctrl+Enter:<div id="debugFreeze" data-rand="0"></div> - Щелкните правой кнопкой мыши на этом новом элементе и выберите "Break on..." → "Attributes modifications".
- Теперь перейдите в консоль и выполните следующую команду:
setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000); - Вернитесь в окно браузера, и у вас есть 5 секунд, чтобы найти ваш элемент и нажать на него/навести курсор/сфокусироваться и т.д., прежде чем сработает точка останова и браузер "замерзнет".
- Теперь вы можете спокойно исследовать ваш нажатый/наведенный курсором/сфокусированный и т.д. элемент.
Конечно, вы можете изменить JavaScript и время, если поняли суть.
Чтобы отладить всплывающее окно в Chrome DevTools, выполните следующие шаги:
- Щелкните правой кнопкой мыши где угодно в вкладке "Elements".
- Выберите "Break on... → Subtree modifications" или "Break on... → Attribute modifications", в зависимости от того, что вам нужно.
- Запустите действие, которое вызывает всплывающее окно. Оно должно "заморозиться", если в DOM произойдут изменения.
- Если вы все еще не видите всплывающее окно, нажмите кнопку
Step over the next function (F10), которая находится рядом сResume (F8)в верхнем центре окна Chrome, пока не "заморозите" нужное вам всплывающее окно.
Таким образом, вы сможете зафиксировать состояние DOM и изучить, что происходит, когда открывается ваше всплывающее окно.
Я пытался использовать другие решения, и они работают, но мне лень, поэтому вот мой способ:
- Наведите курсор на элемент, чтобы активировать состояние расширения.
- ++
- Снова наведите курсор на элемент.
- Кликните правой кнопкой мыши.
- Перейдите в отладчик.
При нажатии правой кнопкой мыши событие мыши больше не регистрируется, так как появляется контекстное меню, так что вы можете безопасно убрать курсор мыши.
Для того чтобы эмулировать фокусированную страницу в инструментах разработчика, выполните следующие шаги:
- Нажмите
Fn + F12, чтобы открыть инструменты разработчика. - В правой части экрана найдите и нажмите на три точки (три вертикальные точки).
- Выберите пункт "Еще инструменты" (More tools).
- Найдите и выберите "Рендеринг" (Rendering).
- В открывшемся меню отметьте опцию "Эмулировать фокусированную страницу" (Emulate a focused page).
Это действие позволит вам протестировать, как ваша страница будет вести себя при фокусе на элементе.
Просмотр состояния :hover в средствах разработчика Chrome
Скрыть полосу прокрутки, но сохранить возможность прокрутки
Цвета в консоли JavaScript
Стилизация кнопки input type="file"
Использование подстановочного знака * в CSS для классов