Зафиксировать экран в панели хром-отладчика/DevTools для проверки popover?

Я использую инспектор хрома, чтобы попытаться проанализировать z-index твитер-бутстрапа popover и найти его чрезвычайно неприятным...

Есть ли способ заморозить popover (пока отображается), чтобы я мог оценить и изменить связанный CSS?

Размещение фиксированного "зависания" на связанной ссылке не приводит к появлению popover.

Ответы

Ответ 1

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

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

Ответ 2

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

  • Запустите следующий javascript в консоли. Это разрывается на отладчик через 5 секунд.

    setTimeout(function(){debugger;}, 5000)

  • Go покажет ваш элемент (зависанием или тем не менее) и дождитесь, пока Chrome не перейдет в отладчик.

  • Теперь перейдите на вкладку Elements в Chrome Inspector, и вы можете искать там свой элемент.
  • Вы также можете щелкнуть по значку Find Element (выглядит как увеличительное стекло), и Chrome отпустит вас, проверит и найдет ваш элемент на странице, щелкнув его правой кнопкой мыши, а затем выбрав Inspect Element

Обратите внимание, что этот подход является небольшим изменением для этого другого отличного ответа на этой странице.

Ответ 3

У меня была такая же проблема, и я думаю, что нашел "универсальное" решение. (предполагая, что сайт использует jQuery)
Надеюсь, это поможет кому-то!

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

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

UPDATE: Как писал Брэд Паркс в своем комментарии, существует намного лучшее и легкое решение с одной строкой кода JS:

запустите этот javascript вместо setTimeout(function(){debugger;}, 5000);, а затем покажите свой элемент и подождите, пока он не перейдет в отладчик

Ответ 4

  • Щелкните правой кнопкой мыши в любом месте вкладки Элементы
  • Выберите Breakon... > subtree modifications
  • Запустите всплывающее окно, которое вы хотите увидеть, и оно замерзнет, ​​если оно увидит изменения в DOM
  • Если вы все еще не видите всплывающее окно, нажмите кнопку Step over the next function(F10) рядом с Resume(F8) в верхней верхней части хрома, пока вы не закроете всплывающее окно, которое хотите увидеть.

Ответ 5

Я обнаружил, что это хорошо работает в Chrome.

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

Force element state

Ответ 6

Мой простой способ:

setTimeout(function(){ debugger; }, 3000);

Ответ 7

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

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

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