Як я можу перевірити html-елемент, який зникає з DOM на втраченому фокусі?

Я намагаюсь перевірити властивості CSS із введення в комірку таблиці. Вхід з’являється при натисканні і зникає при втраченій фокусі, як коли я намагаюся його перевірити. Як я можу це зробити, щоб не втратити фокус під час переходу до іншого вікна (інспектор)?

У браузері Chrome відкрийте «Інструменти розробника» та виберіть вкладку «Елементи» , потім відкрийте контекстне меню батьківського вузла елемента, який ви хочете перевірити, у контекстному меню натисніть на « Перерв» > « Зміни підкреслення» .

Після цього вам просто потрібно натиснути на сторінку, і ви потрапите на інспектора, не втрачаючи уваги і не втрачаючи елемент, який ви хочете перевірити.

Ви можете захопити зникаючий елемент, якщо призупинити виконання JavaScript за допомогою комбінації клавіш без переміщення миші. Ось як це зробити в Chrome:

1. Відкрийте Інструменти для розробників та перейдіть до Джерела.

2. Зверніть увагу на ярлик для призупинення виконання сценарію - F8.

   

3. Взаємодійте з інтерфейсом користувача, щоб отримати елемент для появи.

4. Удар F8.
5. Як ви можете переміщати мишу, огляньте DOM, що завгодно. Стихія залишиться там.

Цей трюк працює і в Firefox та інших сучасних браузерах.

Якщо все інше не вдається, введіть це в консолі:

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

Потім у вас є 5 секунд (або змінити значення на будь-що інше), щоб зробити все, що ви хочете налагоджувати.

Жоден з інших відповідей для мене не працював - дерево DOM не змінювалось (тобто речі, про які я дбаю, зникли) прямо перед тим, як сценарій призупинився.

Не впевнений, що це працює у вашій ситуації, але зазвичай (і в кожному разі варто згадати в цьому плані, оскільки це чудовий інструмент) в Інструментах для розробників Chrome ви можете імітувати стани елементів, і це також :focus .

Для цього перейдіть на Elementsвкладку Інструменти для розробників і переконайтеся, що ви знаходитесь у Stylesрозділі праворуч (це має бути місце за замовчуванням при запуску Інструментів для розробників). Тепер трохи під Стилями у верхньому правому куті ви значком Toggle Element State. При натисканні на неї ви можете моделювати :active, :hover, :focusі :visitedдля елемента ви вибрали на лівій у вашому уявленні коду.

У Chrome на сторінці інструментів розробника для тестованої сторінки ... натисніть меню параметрів та відкрийте налаштування для налаштувань ... у розділі DevTools включіть "Емуляція зосередженої сторінки"

Потім на тестовій сторінці викликати появу елементів. Це спрацьовувало для того, щоб результати пошуку, що з’являються, зосереджувалися на екрані, щоб я міг працювати з ним.

Це не справжнє рішення, але воно зазвичай працює (:

1. Сфокусуйте елемент
2. Клацніть правою кнопкою миші контекстне меню
3. Перемістіться до інструментів для розробників

У мене була дуже складна ситуація, і жодна відповідь не працювала звідси (я не перевіряв відповіді, змінюючи контейнер, який є для мене тілом, або оригінальну подію, тому що я цього не знаю). Нарешті я знайшов вирішення, прорвавшись через точки прориву слухача контрольних подій у Інспекторі Chrome. Можливо, це також спосіб перехрещення браузера для складних ситуацій, коли навіть F8 або клацання правою кнопкою миші приховують спливаюче вікно:

Вставте наступний Javascript у консоль розробника браузера:

// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.

var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
 console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);

У мене є швидше виправити, оскільки я не дуже добре користуюся інструментами, ось що я роблю.

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();

Якщо відкрити Chrome DevTools і потім запустити інспектор елементів за допомогою комбінацій клавіш, це повинно вирішити проблему.

Mac: Cmd+Opt+J а потімCmd+Opt+C

Windows: Ctrl+Shift+J а потімCtrl+Shift+C

[