Как на MacOS (браузер Chrome) проинспектировать поповер, который исчезает если убрать мышку?

Question

[Return Me Void]

Нужно посмотреть структуру DOM дерева, но поповер пропадает (в том числе демонтируется из DOM) при убирании мышки с него.

Есть у кого рабочие способы это провернуть?

Answer 1

[Return Me Void]

1. Навести на элемент для появления поп-апа
2. Нажимая Tab переключить фокус на DevTools
3. Ctrl+Shift+P (или Cmd+Shift+P на Mac)
4. Ввести "JS", выбрать "Отключить/включить JS"

Спасибо Виктор Кожухарь

Answer 2

[Виктор Кожухарь]

Находите элемент, на котором срабатывает :hover, и потом просто устанавливаете ему насильно псевдокласс :hover.
Таким образом он и без мышки будет находиться в этом состоянии.
Соответственно, при этом появится и сам попап, и вы сможете спокойно его проинспектировать.



В качестве альтернативы можно использовать следующий подход:

1. Открываете инструменты разработчика не прикреплёнными к браузеру, а в отдельном окне. Заранее открываете там консоль.

2. Переходите в основное окно браузера и наводите мышь на нужный элемент. Выскакивает попап.

3. Не двигая указатель мыши, переключаетесь с помощью клавиатуры на окно с инструментами разработчика, где заранее открыта консоль. Вводите там команду "debugger". Основное окно браузера фризится вместе с видимым попапом.

4. Спокойно инспектируете попап.

Comments

[Return Me Void]

реализация через js происходит, поэтому отметил что компонент демонтируется. Короче говоря, через этот способ не работает

[Виктор Кожухарь]

Return Me Void, А точно ли вы выставили :hover именно тому элементу, на который завязан скрипт? Попробуйте установить hover у разных элементов в том дереве, где по вашему мнению срабатывает скрипт.

[Return Me Void]

Виктор Кожухарь, попробовал всем выставить hover, не работает (проект на ant-design-vue)

[Виктор Кожухарь]

Return Me Void, Дописал в основной ответ, как можно зафризить страницу при помощи дебаггера. Сам попробовать не могу, потому что использую window manager, но идея должна работать.

[Return Me Void]

Виктор Кожухарь, а что за window manager?

[Return Me Void]

через отключение js на странице получилось, - спасибо что подкинули идею с клавиатуры поставить в фокус dev tools

[Виктор Кожухарь]

Return Me Void, yabai