Как я могу проверить элемент html, который исчезает из DOM при потере фокуса?

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

В браузере Chrome откройте Инструменты разработчика и выберите вкладку «Элементы» , затем откройте контекстное меню родительского узла элемента, который вы хотите проверить, в контекстном меню нажмите « Разбить на > Изменения поддерева» .

После этого вам просто нужно щелкнуть по странице, и вы попадете в инспектор, не теряя фокуса и не теряя элемент, который хотите проверить.

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

1. Откройте Инструменты разработчика и перейдите в Источники.

2. Обратите внимание на ярлык для приостановки выполнения скрипта - F8.

   

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

4. Хит F8.
5. Как вы можете перемещать мышь, проверять DOM, что угодно. Элемент останется там.

Этот трюк работает также в Firefox и других современных браузерах.

Если ничего не помогает, введите это в консоли:

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

Затем у вас есть 5 секунд (или измените значение на любое другое), чтобы отобразить все, что вы хотите отладить.

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

Не уверен, работает ли это в вашей ситуации, но обычно (и в каждом случае стоит упомянуть в этом отношении, поскольку это отличный инструмент) в Chrome Developer Tools вы можете моделировать состояния элементов, и один из них также :focus.

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

В Chrome на странице инструментов разработчика для тестируемой страницы ... щелкните меню параметров и откройте настройки для предпочтений ... в разделе DevTools включите 'Эмулировать целевую страницу'

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

Не настоящее решение, но обычно работает (:

1. Сфокусируйте элемент
2. Щелкните правой кнопкой мыши для контекстного меню
3. Перейти к инструментам разработчика

У меня была очень сложная ситуация, и здесь не было ответа (я не проверял ответы, меняющие контейнер, который является для меня телом или исходным событием, потому что я этого не знаю). Я наконец нашел обходной путь, взломав контрольные точки прослушивателя событий в Chrome Inspector. Возможно, это также кроссбраузерный способ взлома для сложных ситуаций, когда даже 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

[