Екран заморожування в хромованому налагоджувачі / панелі DevTools для перевірки потужністю?

394

Я використовую хромовий інспектор, щоб спробувати проаналізувати z-indexпотужність завантажувального завантажувача у Twitter, і вважаю це надзвичайно засмучуючим ...

Чи є спосіб заморозити переїзд (поки показано), щоб я міг оцінити та змінити пов'язаний CSS?

Якщо встановити фіксований "наведення" на пов'язане посилання, це не спричинить появу перенісся.

css  google-chrome  google-chrome-devtools 
— Аврам
джерело
7
Спробуйте встановити точку debugger;
— перерви
5
Я використовую window.setTimeoutдля запуску debuggerза 5 секунд, потім наведіть курсор на елемент і зачекаю.
— grimmdude
Привіт, технічний автор DevTools тут. Чи можете ви всі надіслати мені MVCE, що демонструють проблему? Станом на 2019 рік у нас є декілька інструментів, які повинні зробити трюк ( точки проходу слухача подій , перемикання псевдокласу ), але я не можу дати детальної відповіді, поки не зможу відтворити вашу ситуацію.
— Кейс Баскі
— Muhammed AbdElFatah
@KayceBasques Ось приклад: telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist Клацніть на спадному списку, щоб відкрити його, а потім спробуйте перевірити перехід вмісту списку у вікні "Елементи".
— RMorrisey

Відповіді:

704

Зрозуміло. Ось моя процедура:

  1. Перейдіть на потрібну сторінку
  2. Відкрийте консоль розробника - F12в Windows / Linux або option+ ⌘+ Jна macOS
  3. Виберіть Sourcesвкладку в хромовому інспекторі
  4. У вікні веб-браузера наведіть курсор на потрібний елемент, щоб ініціювати перехід
  5. Натискайте F8на Windows / Linux (або fn+ F8на macOS), поки показується popover. Якщо ви натиснули будь-де на фактичній сторінці, F8 нічого не зробить. Ваш останній клік повинен бути десь у інспекторі, як вкладка джерел
  6. Перейдіть на Elementsвкладку інспектора
  7. Знайдіть свій поповер (він буде вкладений у HTML-елемент тригера)
  8. Приємно змінюючи CSS
— Аврам
джерело
9
Цей робочий процес дав мені коротке корисне ознайомлення з налагоджувачем точки перелому і допоміг виділити меню, яке було складно стилювати, оскільки воно зникло при натисканні консолі.
— Тревор Пірс
22
Якщо елемент DOM використовує подію фокусування, щоб приховати, у вас немає шансу потрапити на F8!
— Марсель
2
@Dean для запуску F8 вам потрібно використовувати fn!
— mik01aj
10
Для отримання додаткової інформації, що F8робить ярлик, це фактично призупинити налагоджувач (виконання сценарію). А ctrl + \ також працює. ( cmd + \ у MacOS).
— LeOn - Хан Лі
1
Або ви можете натиснути F8двічі
— samdd
274

Щоб мати можливість перевірити будь-який елемент, виконайте наступне. Це має спрацювати, навіть якщо важко дублювати стан наведення:

  • Запустіть наступний javascript у консолі. Це ввірветься в налагоджувач через 5 секунд.

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

  • Перейдіть, покажіть свій елемент (навести курсор миші або все-таки) і зачекайте, поки Chrome ввірветься в налагоджувач.

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

Зауважте, що цей підхід є незначною зміною цієї чудової відповіді на цій сторінці.

— Бред Паркс
джерело
7
я поважаю, що ви належним чином поважали відповідь frzsombor. приємно.
— Джеремі Моріц
4
Це те, що мені було потрібно, оскільки функціональність була завдяки добавленню DOM-елемента на js Focus та видалення з розмиттям, що завжди відбувається при переході на інструменти розробки.
— trudesign
6
Рішення Абрама F8 не працювало для мене. Цей і зробив. Дякую!
— Ральф
3
Дякую. Я зробив закладку з назвою : ❚❚, адреса : javascript:debugger;. F8працює, але для тих, хто вважає за краще використовувати мишу, це може бути зручніше.
— Тимек
1
Як коментують інші, відповідь F8 не працювала для мене, і вела мене зовсім горіхами! Це працює як шарм. Дякую!
— DoYouEvenCodeBro
70

ОНОВЛЕННЯ: Як писав Бред Паркс у своєму коментарі, є набагато краще та простіше рішення із лише одним рядком коду JS:

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

Оригінальна відповідь:

У мене просто була та сама проблема, і я думаю, що знайшов «універсальне» рішення. (припустимо, що сайт використовує jQuery)
Сподіваюся, що він комусь допомагає!

  1. Перейдіть на вкладку елементів у інспектора
  2. Клацніть правою кнопкою миші <body>та натисніть " Редагувати як HTML "
  3. Додайте наступний елемент, після <body>чого натисніть Ctrl + Enter:
    <div id="debugFreeze" data-rand="0"></div>
  4. Клацніть правою кнопкою миші цей новий елемент та виберіть "Перерва на ..." -> "Зміни атрибутів"
  5. Тепер перейдіть до подання консолі та запустіть таку команду:
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. Тепер поверніться до вікна браузера, і у вас є 5 секунд, щоб знайти свій елемент і натисніть / навести курсор / фокусувати / і т. Д., До того, як буде зламана точка розриву, і браузер "застигне".
  7. Тепер ви можете спокійно оглянути елемент, який клацнув / наблизився / зосередився / тощо.

Звичайно, ви можете змінити javascript і терміни, якщо вам зрозуміло це.

— frzsombor
джерело
11
Гей! Відмінна ідея ... вам навіть не потрібно додавати додатковий div ... Хоча просто запустіть цей JavaScript, а setTimeout(function(){debugger;}, 5000);потім перейдіть, покажіть свій елемент і почекайте, поки він не прорветься в налагоджувач. Потім натисніть на вкладку "Елементи" в Інспекторі Chrome, і ви зможете шукати там свій елемент. Ви також можете натиснути на піктограму "Знайти елемент" (схожа на лупу), а Chrome дозволить вам перейти та оглянути та знайти свій елемент на сторінці, клацнувши правою кнопкою миші, а потім вибрати "Перевірити елемент".
— Бред Паркс
5
Я думаю, ви повинні додати це як відповідь, тому що це рішення не просто краще, ніж моє, але краще, ніж усі інші тут. Дійсно приємно!
— frzsombor
38
  1. Клацніть правою кнопкою миші будь-де всередині вкладки «Елементи»
  2. Виберіть Breakon... > subtree modifications
  3. Запустіть спливаюче вікно, яке ви хочете побачити, і воно застигне, якщо побачить зміни в DOM
  4. Якщо ви все ще не бачите спливаючого вікна, натисніть Step over the next function(F10)кнопку поруч Resume(F8)у верхньому верхньому центрі хромування, поки ви не заморозите спливаюче вікно, яке ви хочете бачити.
— Адріан Енрікес
джерело
3
ДЯКУЮ ТОБІ! Я цього не знав, і мене це врятувало
— R Клавен
14

Я виявив, що це дуже добре працює в Chrome.

Клацніть правою кнопкою миші елемент, який ви хочете оглянути, а потім натисніть кнопку "Форс стану"> "Навести курсор". Скріншот додається.

Стан елемента сили

— Лія Хейге
джерело
5
Він буде працювати лише в тому випадку, якщо Popover спрацьовує css.
— mik01aj
6

Помістіть це на вкладку консолі:

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

Потім натисніть, де відобразити спливаюче вікно, через 5 секунд - екран буде заморожено і весело налаштувати CSS.

— Паркер Лученцо
джерело
0

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

setTimeout(function(){ debugger; }, 3000);
— Надав Б
джерело
7
Це точно те ж рішення Бреда Паркса, яке було опубліковано 3 роки тому
— frzsombor
-2

Я спробував інші рішення тут, вони працюють, але я лінивий, тому це моє рішення

  1. наведіть курсор на елемент, щоб запустити розширений стан
  2. ctrl+ shift+c
  3. знову наведіть курсор на елемент
  4. клацніть правою кнопкою миші
  5. перейдіть до налагоджувача

клацнувши правою кнопкою миші, вона більше не реєструє події миші, оскільки з’являється контекстне меню, тож ви можете безпечно перемістити мишу

— Вінсент Тан
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.