Проверить зависший элемент в Chrome?

Question 1

Я пытаюсь просмотреть с помощью инструментов разработчика Chrome, как всплывающие подсказки структурированы на сайте. Однако, даже когда я наведен на элемент, когда я «проверяю элемент», для всплывающей подсказки в html ничего не отображается. Я знаю, что могу установить стиль :hover, но я все еще не вижу html или css всплывающей подсказки.

Любые идеи?

Question 2

Я действительно нашел способ сделать это с помощью всплывающих подсказок Twitter Bootstrap. Если вы откроете инструменты разработчика (F12) на другом мониторе, затем наведите указатель мыши на элемент, чтобы вызвать всплывающую подсказку, щелкните правой кнопкой мыши, как если бы вы выбрали «Проверить элемент». Не закрывая это контекстное меню, переместите фокус на инструменты разработчика. HTML-код всплывающей подсказки должен отображаться рядом с элементом всплывающей подсказки в HTML. Тогда вы можете смотреть на него, как на другой элемент. Если вы вернетесь в Chrome, HTML исчезнет, так что нужно знать о чем-то.

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

Question 3

F8 приостановит отладку.

Наведите указатель мыши на всплывающую подсказку и нажмите, F8пока она отображается.

Теперь вы можете использовать инспектор для просмотра CSS.

Question 4

Это решение работает без лишнего кода.

Нажмите, command-option-jчтобы открыть консоль. Нажмите кнопку в виде окна в правом верхнем углу консоли, чтобы открыть консоль в другом окне.

Затем в окне Chrome наведите указатель мыши на элемент, который запускает всплывающее окно, нажмите command-`столько раз, сколько вам нужно, чтобы сосредоточиться на консоли, затем введите debugger. Это остановит страницу, после чего вы сможете проверить элемент на вкладке «Элементы».

Question 5

Вам просто нужно заставить всплывающую подсказку отображаться как таковая

$('.myelement').tooltip('open');

Теперь всплывающая подсказка будет отображаться независимо от состояния наведения.

Прокрутите вниз в нижней части DOM, где вы должны увидеть разметку.

Обновление см. Комментарий cneuro для Bootstrap 3.

$('.myelement').tooltip('show');

Обновление см. Ответ Марко Грешака для Chrome и, по-видимому, Safari, $0можно использовать как ярлык для текущего выбранного элемента. Похоже, это работает и в Safari.

$($0).tooltip('show')

Question 6

Щелкните f12перейти на вкладку консоли и добавьте следующее:

setTimeout(()=> {debugger},5000)

Это даст вам 5 секунд, чтобы сделать все, что вы хотите, и он сломается 5 seconds. Затем вы можете проверить целевой элемент

(например, наведите на элемент и подождите 5 секунд, затем проверьте ..)

Question 7

Для меня принятый ответ не сработал: нажатие в 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 не изменился.

Question 8

Ответ в едином окне, без кодирования

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

Откройте DevTools Chrome с помощью F12 / Ctrl + Shift + I (Windows / Linux) или Command + Option + I (Mac).
Выберите вкладку « Источники » в окне DevTools.
С помощью мыши наведите указатель мыши на элемент, который вы хотите проверить, чтобы всплывающая подсказка стала видимой.
Нажмите F8 (Windows / Linux / Mac), чтобы приостановить выполнение скрипта. Главное окно станет серым, и появится всплывающее окно «Приостановлено в отладчике».
В окне DevTools выберите вкладку Elements
Для всплывающих подсказок Bootstrap всплывающая подсказка будет последней <div>в<body>

Question 9

Нет кода решения для всплывающих подсказок, активируемых JS:

С помощью инструментов разработчика Chrome проверьте содержащий / родительский элемент всплывающей подсказки. На вкладке «Элементы» щелкните правой кнопкой мыши элемент DOM этого контейнера, затем выберите «Разбить на»> «Модификации поддерева». В следующий раз, когда вы наведете указатель мыши на ту часть DOM, в которой находится всплывающая подсказка, JS-код будет приостановлен, что позволит вам проверить содержимое всплывающей подсказки.

Question 10

Следуй этим шагам

Открытое Inspectокно в хроме.
Наведите указатель мыши на всплывающую подсказку.
Нажмите F8

Выполнение JS будет приостановлено, и вы сможете просмотреть всплывающую подсказку.
Нажмите еще F8раз, чтобы начать выполнение и F10отладить.

Question 11

Вот простое решение: если у вас есть динамические всплывающие подсказки, вы можете сделать их «постоянными», (временно) изменив событие триггера на click. Это приведет к тому, что всплывающая подсказка исчезнет только при щелчке мышью:

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

Таким образом, его можно легко проверить с помощью инструментов отладки FF или Chrome.

Question 12

1) Откройте окно Inspect, нажав F12.

2) Перейдите на вкладку источника (рядом с консолью)

3) Теперь наведите указатель мыши на элемент, который нужно проверить, и удерживайте там курсор мыши.

4) С помощью клавиатуры (Tab или Shift + Tab) переместите элемент управления на кнопку паузы или F8 См. Изображение

5) Когда фокус клавиатуры находится на кнопке воспроизведения. Нажмите Enter. Ваш элемент зависания будет заморожен, теперь вы можете делать что угодно

Question 13

эти всплывающие подсказки так просто редактировать.

Шаг 1. Осмотрите элемент с подсказкой. Убедитесь, что в devtools он выделен синим.

Шаг 2 : щелкните правой кнопкой мыши элемент (в части инструментов разработчика) и выберите: изменения атрибутов в разделе Разрыв при

Шаг 3. Наведите указатель мыши на проверяемый элемент, и на сайте появится серый оверлей с небольшим текстом: «Приостановлено в отладчике».

в верхней части экрана

Шаг 4 : Нажмите синюю стрелку, пока не будет выбрано состояние наведения.

Шаг 5. Проверьте и отредактируйте всплывающую подсказку

Question 14

Вот как я это сделал на Mac:

Наведите курсор на элемент, у которого открыта всплывающая подсказка с chrome devtools.
Подождите, пока появится всплывающая подсказка.
Откройте палитру команд devtools с помощью сочетания клавиш. Cmd+Shift+Pработал у меня.
Введите Disable JavaScriptи нажмитеEnter

Это предотвратит исчезновение всех всплывающих подсказок, использующих JavaScript.

Question 15

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

Question 16

В Chome для Linux это может быть достигнуто для всплывающих подсказок, генерируемых JS, например, для ссылок на WikiPedia, выполнив следующие действия:

Как указано выше, откройте инструменты разработчика с помощью F12. Откройте их в другом окне. Выделите всплывающую подсказку и нажмите Ctrl-Shift-C (Инспектор HTML). Когда вы перемещаетесь по подсказке, в окне разработчика будет отображаться соответствующий раздел.

Если вам нужно держать подсказку открытой при наведении указателя мыши на нее, чтобы иметь возможность более тщательно изучить ее в другом окне, затем щелкните правой кнопкой мыши всплывающую подсказку и оставьте контекстное меню вверху, а затем щелкните окно инструментов разработчика. В этом случае подсказка остается в окне Википедии.

В некоторой степени это также работает с советами начальной загрузки.

Question 17

По какой-то причине приведенные здесь ответы не работали для меня в Windows. Я смог проверить всплывающую подсказку, открыв инструменты разработчика, затем наведя курсор на элемент, который вызывает всплывающую подсказку, а затем щелкнул правой кнопкой мыши по этому элементу (не всплывающей подсказке). Затем переместите курсор на панель инспектора и прокрутите вниз. Элемент всплывающей подсказки все еще должен быть на месте.

Question 18

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

1 - Откройте инструменты разработчика с помощью F12.

2 - Выберите вкладку «Элементы».

3 - Выберите родительский элемент, содержащий всплывающую подсказку.

4 - Щелкните «...» (в строке родительского элемента) и после выберите «Разбить на» / «Модификации поддерева» (см. Изображение ниже)

5 - Наконец, вернитесь в приложение и покажите всплывающую подсказку. Он должен блокировать выполнение после того, как всплывающая подсказка станет видимой.

Надеюсь, это может быть кому-то полезно!

Question 19

Другое решение, которое я нашел для этой проблемы. В представлении для мобильных устройств или планшетов в Chrome нажмите Crt + Shift + M в инструментах Chrome Dev для просмотра на мобильных устройствах в Chrome. Щелкните (Tap) на всплывающей подсказке div, и вы можете проверить его, щелкнув правой кнопкой мыши на всплывающей подсказке

Question 20

Нажмите, command-option-jчтобы открыть консоль. Нажмите кнопку в виде окна в правом верхнем углу консоли, чтобы открыть консоль в другом окне.

Затем в окне Chrome наведите указатель мыши на элемент, который запускает всплывающее окно, нажмите command-столько раз, сколько вам нужно, чтобы сосредоточиться на консоли, затем введите debugger. Это заморозит страницу; затем вы можете проверить элемент на вкладке «Элементы».

Question 21

Стоит отметить, что переключение состояния: hover из инструментов разработчика влияет только в том случае, если текст подсказки включен с помощью правил CSS: hover в первую очередь. Переключатель применяет состояние наведения к элементу только для целей рендеринга, но не вызывает соответствующее событие наведения мыши JavaScript.

Многие фреймворки, такие как AngularJS, динамически прикрепляют HTML всплывающей подсказки к нижней части тела документа через JavaScript при наведении курсора на целевой элемент, поэтому любое наведение и проверка целевого элемента не помогут.

Ответ @joeyyang очень хорошо сработал для меня в этом сценарии.

Question 22

Я нашел один из самых простых способов:

Откройте инструменты разработчика Chrome сбоку
Наведите указатель мыши на элемент
Щелкните правой кнопкой мыши
Нажмите на инструменты разработчика
Теперь вы можете просматривать и изменять стили

Answer 1

Я пытаюсь просмотреть с помощью инструментов разработчика Chrome, как всплывающие подсказки структурированы на сайте. Однако, даже когда я наведен на элемент, когда я «проверяю элемент», для всплывающей подсказки в html ничего не отображается. Я знаю, что могу установить стиль :hover, но я все еще не вижу html или css всплывающей подсказки.

Любые идеи?

Answer 2

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

Мухаммед Абдельфаттах

Answer 3

81

Я действительно нашел способ сделать это с помощью всплывающих подсказок Twitter Bootstrap. Если вы откроете инструменты разработчика (F12) на другом мониторе, затем наведите указатель мыши на элемент, чтобы вызвать всплывающую подсказку, щелкните правой кнопкой мыши, как если бы вы выбрали «Проверить элемент». Не закрывая это контекстное меню, переместите фокус на инструменты разработчика. HTML-код всплывающей подсказки должен отображаться рядом с элементом всплывающей подсказки в HTML. Тогда вы можете смотреть на него, как на другой элемент. Если вы вернетесь в Chrome, HTML исчезнет, так что нужно знать о чем-то.

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

Джастин Чмура
источник

12

Ну да, но не на Mac.

actimel

2

- Шаг 1. Проверьте элемент, который генерирует всплывающую подсказку, чтобы вызвать инструменты Chrome Dev. - Шаг 2: при наведении курсора на элемент появится всплывающая подсказка. Не выходя из элемента, откройте новое окно (Command-N на Mac, Ctrl-N в другом месте) - Шаг 3: Перетащите новое окно под старое окно, чтобы вы все еще могли видеть всплывающую подсказку, затем переместите курсор в инспектор элементов . - Шаг 4: прокрутите вниз, где всплывающая подсказка добавляется к DOM. Щелкните элемент, чтобы увидеть его стиль.

pgblu

2

PS это не работает для всплывающих подсказок, которые создаются с помощью Javascript из собственного атрибута заголовка элемента, как, например, происходит в SO. Эти подсказки используют стиль по умолчанию.

pgblu

Это помогло мне для всплывающих подсказок в Кендо

k29,

1

Уловка: сначала перейдите на вкладку источника. Затем вы можете приостановить Javascript с помощью кнопки F8. Клавиша паузы там с сочетанием клавиш F8 / Ctrl + \ (ответ от @Rajan на этой странице)

rostamiani

Answer 4

12

Ну да, но не на Mac.

actimel

Answer 5

2

- Шаг 1. Проверьте элемент, который генерирует всплывающую подсказку, чтобы вызвать инструменты Chrome Dev. - Шаг 2: при наведении курсора на элемент появится всплывающая подсказка. Не выходя из элемента, откройте новое окно (Command-N на Mac, Ctrl-N в другом месте) - Шаг 3: Перетащите новое окно под старое окно, чтобы вы все еще могли видеть всплывающую подсказку, затем переместите курсор в инспектор элементов . - Шаг 4: прокрутите вниз, где всплывающая подсказка добавляется к DOM. Щелкните элемент, чтобы увидеть его стиль.

pgblu

Answer 6

2

PS это не работает для всплывающих подсказок, которые создаются с помощью Javascript из собственного атрибута заголовка элемента, как, например, происходит в SO. Эти подсказки используют стиль по умолчанию.

pgblu

Answer 7

Это помогло мне для всплывающих подсказок в Кендо

k29,

Answer 8

1

Уловка: сначала перейдите на вкладку источника. Затем вы можете приостановить Javascript с помощью кнопки F8. Клавиша паузы там с сочетанием клавиш F8 / Ctrl + \ (ответ от @Rajan на этой странице)

rostamiani

Answer 9

86

F8 приостановит отладку.

Наведите указатель мыши на всплывающую подсказку и нажмите, F8пока она отображается.

Теперь вы можете использовать инспектор для просмотра CSS.

Двжонстон
источник

4

Мне нравится, как в Stackoverflow, пока вы продолжаете прокручивать вниз, вы найдете действительно хороший ответ, который намного лучше, чем остальные. Это просто и легко без лишних скриптов.

Александр Диксон

2

F8 у меня почему-то не сработало, но пауза также обязана ctrl- \

Брайан Ларсен

Лучшее решение здесь

NiallMitch14,

Ни <kbd> F8 </kbd>, ни <kbd> AltGr </kbd> - <kbd> RCtrl </kbd> - <kbd> ß </kbd> на моей немецкой раскладке клавиатуры не приостанавливают отладчик.

тестирование

Answer 10

4

Мне нравится, как в Stackoverflow, пока вы продолжаете прокручивать вниз, вы найдете действительно хороший ответ, который намного лучше, чем остальные. Это просто и легко без лишних скриптов.

Александр Диксон

Answer 11

2

F8 у меня почему-то не сработало, но пауза также обязана ctrl- \

Брайан Ларсен

Answer 12

Лучшее решение здесь

NiallMitch14,

Answer 13

Ни <kbd> F8 </kbd>, ни <kbd> AltGr </kbd> - <kbd> RCtrl </kbd> - <kbd> ß </kbd> на моей немецкой раскладке клавиатуры не приостанавливают отладчик.

тестирование

Answer 14

85

Это решение работает без лишнего кода.

Нажмите, command-option-jчтобы открыть консоль. Нажмите кнопку в виде окна в правом верхнем углу консоли, чтобы открыть консоль в другом окне.

Затем в окне Chrome наведите указатель мыши на элемент, который запускает всплывающее окно, нажмите command-`столько раз, сколько вам нужно, чтобы сосредоточиться на консоли, затем введите debugger. Это остановит страницу, после чего вы сможете проверить элемент на вкладке «Элементы».

Джоэян
источник

6

Ответ действительно хорош. Минимальный код, без jQuery или настройки двух мониторов.

uKolka

1

Это сработало! Первоначально из-за некоторой неправильной конфигурации я видел всплывающие подсказки HTML по умолчанию, а не всплывающие подсказки Bootstrap. После устранения этой проблемы ваше решение сработало. Спасибо.

DFB

2

Кроме того, если вы теряете фокус при записи debuggerв консоль, вы можете нажать alt+tabпри наведении курсора на элемент. Это работало для приложений Chromium в Windows.

Orcun

1

Это был отличный ответ!

Нобита

На странице сочетаний клавиш Chrome DevTools говорится, что это элемент управления + `вместо command +`, чтобы снова сфокусироваться на консоли. Может, все изменилось.

rinat.io

Answer 15

6

Ответ действительно хорош. Минимальный код, без jQuery или настройки двух мониторов.

uKolka

Answer 16

1

Это сработало! Первоначально из-за некоторой неправильной конфигурации я видел всплывающие подсказки HTML по умолчанию, а не всплывающие подсказки Bootstrap. После устранения этой проблемы ваше решение сработало. Спасибо.

DFB

Answer 17

2

Кроме того, если вы теряете фокус при записи debuggerв консоль, вы можете нажать alt+tabпри наведении курсора на элемент. Это работало для приложений Chromium в Windows.

Orcun

Answer 18

1

Это был отличный ответ!

Нобита

Answer 19

На странице сочетаний клавиш Chrome DevTools говорится, что это элемент управления + `вместо command +`, чтобы снова сфокусироваться на консоли. Может, все изменилось.

rinat.io

Answer 20

63

Вам просто нужно заставить всплывающую подсказку отображаться как таковая

$('.myelement').tooltip('open');

Теперь всплывающая подсказка будет отображаться независимо от состояния наведения.

Прокрутите вниз в нижней части DOM, где вы должны увидеть разметку.

Обновление см. Комментарий cneuro для Bootstrap 3.

$('.myelement').tooltip('show');

Обновление см. Ответ Марко Грешака для Chrome и, по-видимому, Safari, $0можно использовать как ярлык для текущего выбранного элемента. Похоже, это работает и в Safari.

$($0).tooltip('show')

Адам Грант
источник

1

$ ('. myelement'). tooltip ('open') - это то, что сработало для меня.

Текумара

6

Что касается Bootstrap 3, теперь это .tooltip('show') getbootstrap.com/javascript/#tooltips-methods

cneuro

2

В Chrome к текущему выбранному элементу можно получить доступ, как $0в консоли. Поэтому вы можете выбрать элемент, который запускает всплывающую подсказку, и запустить $($0).tooltip('show').

Марко Грешак

Answer 21

1

$ ('. myelement'). tooltip ('open') - это то, что сработало для меня.

Текумара

Answer 22

6

Что касается Bootstrap 3, теперь это .tooltip('show') getbootstrap.com/javascript/#tooltips-methods

cneuro

Answer 23

2

В Chrome к текущему выбранному элементу можно получить доступ, как $0в консоли. Поэтому вы можете выбрать элемент, который запускает всплывающую подсказку, и запустить $($0).tooltip('show').

Марко Грешак

Answer 24

Щелкните f12перейти на вкладку консоли и добавьте следующее:

setTimeout(()=> {debugger},5000)

Это даст вам 5 секунд, чтобы сделать все, что вы хотите, и он сломается 5 seconds. Затем вы можете проверить целевой элемент

(например, наведите на элемент и подождите 5 секунд, затем проверьте ..)

Answer 25

Также работает в Electron.

xmedeko

Answer 26

24

Для меня принятый ответ не сработал: нажатие в 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 не изменился.

микемаккана
источник

1

Умная ! Именно то, что я искал. Спасибо :) Хотя по какой-то причине он не работал с F12 с моей настройкой, поэтому я использовал keyCode == 13 и нажал ENTER.

Джереми Ф.

2

отличное решение! Я бы посоветовал сохранить этот полезный фрагмент в области SOURCE -> SNIPPETS хрома, чтобы вы могли выполнить его одним двойным щелчком;)

Magico

1

Отличное решение. Очень умный.

Чарли Далсасс

Answer 27

1

Умная ! Именно то, что я искал. Спасибо :) Хотя по какой-то причине он не работал с F12 с моей настройкой, поэтому я использовал keyCode == 13 и нажал ENTER.

Джереми Ф.

Answer 28

2

отличное решение! Я бы посоветовал сохранить этот полезный фрагмент в области SOURCE -> SNIPPETS хрома, чтобы вы могли выполнить его одним двойным щелчком;)

Magico

Answer 29

1

Отличное решение. Очень умный.

Чарли Далсасс

Answer 30

Ответ в едином окне, без кодирования

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

Откройте DevTools Chrome с помощью F12 / Ctrl + Shift + I (Windows / Linux) или Command + Option + I (Mac).
Выберите вкладку « Источники » в окне DevTools.
С помощью мыши наведите указатель мыши на элемент, который вы хотите проверить, чтобы всплывающая подсказка стала видимой.
Нажмите F8 (Windows / Linux / Mac), чтобы приостановить выполнение скрипта. Главное окно станет серым, и появится всплывающее окно «Приостановлено в отладчике».
В окне DevTools выберите вкладку Elements
Для всплывающих подсказок Bootstrap всплывающая подсказка будет последней <div>в<body>

Answer 31

Нет кода решения для всплывающих подсказок, активируемых JS:

С помощью инструментов разработчика Chrome проверьте содержащий / родительский элемент всплывающей подсказки. На вкладке «Элементы» щелкните правой кнопкой мыши элемент DOM этого контейнера, затем выберите «Разбить на»> «Модификации поддерева». В следующий раз, когда вы наведете указатель мыши на ту часть DOM, в которой находится всплывающая подсказка, JS-код будет приостановлен, что позволит вам проверить содержимое всплывающей подсказки.

Answer 32

Следуй этим шагам

Открытое Inspectокно в хроме.
Наведите указатель мыши на всплывающую подсказку.
Нажмите F8

Выполнение JS будет приостановлено, и вы сможете просмотреть всплывающую подсказку.
Нажмите еще F8раз, чтобы начать выполнение и F10отладить.

Answer 33

Вот простое решение: если у вас есть динамические всплывающие подсказки, вы можете сделать их «постоянными», (временно) изменив событие триггера на click. Это приведет к тому, что всплывающая подсказка исчезнет только при щелчке мышью:

$('body').tooltip({
    selector: "[data-toggle='tooltip']",
    trigger: "click"
});

Таким образом, его можно легко проверить с помощью инструментов отладки FF или Chrome.

Answer 34

1) Откройте окно Inspect, нажав F12.

2) Перейдите на вкладку источника (рядом с консолью)

3) Теперь наведите указатель мыши на элемент, который нужно проверить, и удерживайте там курсор мыши.

4) С помощью клавиатуры (Tab или Shift + Tab) переместите элемент управления на кнопку паузы или F8 См. Изображение

5) Когда фокус клавиатуры находится на кнопке воспроизведения. Нажмите Enter. Ваш элемент зависания будет заморожен, теперь вы можете делать что угодно

Answer 35

эти всплывающие подсказки так просто редактировать.

Шаг 1. Осмотрите элемент с подсказкой. Убедитесь, что в devtools он выделен синим.

Шаг 2 : щелкните правой кнопкой мыши элемент (в части инструментов разработчика) и выберите: изменения атрибутов в разделе Разрыв при

Шаг 3. Наведите указатель мыши на проверяемый элемент, и на сайте появится серый оверлей с небольшим текстом: «Приостановлено в отладчике».

в верхней части экрана

Шаг 4 : Нажмите синюю стрелку, пока не будет выбрано состояние наведения.

Шаг 5. Проверьте и отредактируйте всплывающую подсказку

Answer 36

Вот как я это сделал на Mac:

Наведите курсор на элемент, у которого открыта всплывающая подсказка с chrome devtools.
Подождите, пока появится всплывающая подсказка.
Откройте палитру команд devtools с помощью сочетания клавиш. Cmd+Shift+Pработал у меня.
Введите Disable JavaScriptи нажмитеEnter

Это предотвратит исчезновение всех всплывающих подсказок, использующих JavaScript.

Answer 37

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

Answer 38

В Chome для Linux это может быть достигнуто для всплывающих подсказок, генерируемых JS, например, для ссылок на WikiPedia, выполнив следующие действия:

Как указано выше, откройте инструменты разработчика с помощью F12. Откройте их в другом окне. Выделите всплывающую подсказку и нажмите Ctrl-Shift-C (Инспектор HTML). Когда вы перемещаетесь по подсказке, в окне разработчика будет отображаться соответствующий раздел.

Если вам нужно держать подсказку открытой при наведении указателя мыши на нее, чтобы иметь возможность более тщательно изучить ее в другом окне, затем щелкните правой кнопкой мыши всплывающую подсказку и оставьте контекстное меню вверху, а затем щелкните окно инструментов разработчика. В этом случае подсказка остается в окне Википедии.

В некоторой степени это также работает с советами начальной загрузки.

Answer 39

По какой-то причине приведенные здесь ответы не работали для меня в Windows. Я смог проверить всплывающую подсказку, открыв инструменты разработчика, затем наведя курсор на элемент, который вызывает всплывающую подсказку, а затем щелкнул правой кнопкой мыши по этому элементу (не всплывающей подсказке). Затем переместите курсор на панель инспектора и прокрутите вниз. Элемент всплывающей подсказки все еще должен быть на месте.

Answer 40

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

1 - Откройте инструменты разработчика с помощью F12.

2 - Выберите вкладку «Элементы».

3 - Выберите родительский элемент, содержащий всплывающую подсказку.

4 - Щелкните «...» (в строке родительского элемента) и после выберите «Разбить на» / «Модификации поддерева» (см. Изображение ниже)

5 - Наконец, вернитесь в приложение и покажите всплывающую подсказку. Он должен блокировать выполнение после того, как всплывающая подсказка станет видимой.

Надеюсь, это может быть кому-то полезно!

Answer 41

Другое решение, которое я нашел для этой проблемы. В представлении для мобильных устройств или планшетов в Chrome нажмите Crt + Shift + M в инструментах Chrome Dev для просмотра на мобильных устройствах в Chrome. Щелкните (Tap) на всплывающей подсказке div, и вы можете проверить его, щелкнув правой кнопкой мыши на всплывающей подсказке

Answer 42

Нажмите, command-option-jчтобы открыть консоль. Нажмите кнопку в виде окна в правом верхнем углу консоли, чтобы открыть консоль в другом окне.

Затем в окне Chrome наведите указатель мыши на элемент, который запускает всплывающее окно, нажмите command-столько раз, сколько вам нужно, чтобы сосредоточиться на консоли, затем введите debugger. Это заморозит страницу; затем вы можете проверить элемент на вкладке «Элементы».

Answer 43

Стоит отметить, что переключение состояния: hover из инструментов разработчика влияет только в том случае, если текст подсказки включен с помощью правил CSS: hover в первую очередь. Переключатель применяет состояние наведения к элементу только для целей рендеринга, но не вызывает соответствующее событие наведения мыши JavaScript.

Многие фреймворки, такие как AngularJS, динамически прикрепляют HTML всплывающей подсказки к нижней части тела документа через JavaScript при наведении курсора на целевой элемент, поэтому любое наведение и проверка целевого элемента не помогут.

Ответ @joeyyang очень хорошо сработал для меня в этом сценарии.

Answer 44

-2

Я нашел один из самых простых способов:

Откройте инструменты разработчика Chrome сбоку
Наведите указатель мыши на элемент
Щелкните правой кнопкой мыши
Нажмите на инструменты разработчика
Теперь вы можете просматривать и изменять стили

Каспарс Сириченко
источник

Это бесполезно @Kaspars

Es Noguera,

@EsNoguera может быть более конкретным, почему. У меня это сработало. Поскольку я нашел метод, который работает, почему мне плохо быть предложенным?

Каспарс Сириченко

Answer 45

Это бесполезно @Kaspars

Es Noguera,

Answer 46

@EsNoguera может быть более конкретным, почему. У меня это сработало. Поскольку я нашел метод, который работает, почему мне плохо быть предложенным?

Каспарс Сириченко

Проверить зависший элемент в Chrome?

Ответы: