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


108

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

Любые идеи?


Ответы:


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

86

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

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

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


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

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

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

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

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

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').
Марко Грешак

31

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

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

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

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


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

24

Для меня принятый ответ не сработал: нажатие в DevTools сразу закрыло всплывающую подсказку.

Однако я нашел /superuser/249050/chrome-keyboard-shortcut-to-pause-script-execution, который мне помог:

  1. В консоли :, Запустите:
    const F12 = 123
    window.addEventListener('keydown', function(event) { 
      if (event.keyCode === F12 ) {
        debugger; 
      }
    });
  1. Выделите элемент с помощью инспектора

  2. Нажмите F12

Теперь вы можете проверить элемент с приостановленным JavaScript, чтобы DOM не изменился.


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

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

1
Отличное решение. Очень умный.
Чарли Далсасс

10

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

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

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

5

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

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


4

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

  1. Открытое Inspectокно в хроме.

  2. Наведите указатель мыши на всплывающую подсказку.

  3. Нажмите F8

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

  4. Нажмите еще F8раз, чтобы начать выполнение и F10отладить.


2

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

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

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


2

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

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

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

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

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


1

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

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

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

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

введите описание изображения здесь

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

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

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


1

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

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

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


0

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


0

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

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

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

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


0

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


0

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

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

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

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

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

Установить разрыв родительского элемента

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

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


0

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


0

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

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


-1

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

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

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


-2

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

  1. Откройте инструменты разработчика Chrome сбоку

  2. Наведите указатель мыши на элемент

  3. Щелкните правой кнопкой мыши

  4. Нажмите на инструменты разработчика

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


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

@EsNoguera может быть более конкретным, почему. У меня это сработало. Поскольку я нашел метод, который работает, почему мне плохо быть предложенным?
Каспарс Сириченко
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.