Подтвердить что ты не робот

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

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

    Pause script execution

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

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

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

Ответ 3

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

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

Затем у вас есть 5 секунд (или измените значение на что-либо еще), чтобы появилось все, что вы хотите отладить.

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

Ответ 4

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

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

enter image description here

Ответ 5

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

  • Сконцентрируйте элемент
  • Щелкните правой кнопкой мыши контекстное меню
  • Перейти к инструментам разработчика

Проверка фокусируемого ввода

Ответ 6

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

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

Ответ 7

Вставьте следующий 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);

Ответ 8

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

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