Отслеживание фокуса элемента

Предположим, вы тестируете доступность навигации по странице с помощью клавиатуры. При навигации по странице с помощью клавиши Tab кольцо фокусировки иногда пропадает, поскольку элемент, на котором находится фокус, скрыт. Чтобы отслеживать элемент в фокусе в DevTools:

  1. Откройте Консоль .
  2. Нажмите «Создать живое выражение». Создать живое выражение .

    Создание живого выражения.

    Дополнительные сведения см. в разделе Просмотр значений JavaScript в режиме реального времени с помощью Live Expressions .

  3. Введите document.activeElement .

  4. Нажмите за пределами пользовательского интерфейса Live Expression, чтобы сохранить.

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

  • Наведите указатель мыши на результат, чтобы выделить выделенный элемент в области просмотра.
  • Щелкните результат правой кнопкой мыши и выберите «Показать на панели элементов» , чтобы отобразить элемент в дереве DOM на панели «Элементы» .
  • Щелкните результат правой кнопкой мыши и выберите «Сохранить как глобальную переменную» , чтобы создать ссылку на переменную для узла, которую можно использовать в консоли .
,

Предположим, вы тестируете доступность навигации по странице с помощью клавиатуры. При навигации по странице с помощью клавиши Tab кольцо фокусировки иногда пропадает, поскольку элемент, на котором находится фокус, скрыт. Чтобы отслеживать элемент в фокусе в DevTools:

  1. Откройте Консоль .
  2. Нажмите «Создать живое выражение». Создать живое выражение .

    Создание живого выражения.

    Дополнительные сведения см. в разделе Просмотр значений JavaScript в режиме реального времени с помощью Live Expressions .

  3. Введите document.activeElement .

  4. Нажмите за пределами пользовательского интерфейса Live Expression, чтобы сохранить.

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

  • Наведите указатель мыши на результат, чтобы выделить выделенный элемент в области просмотра.
  • Щелкните результат правой кнопкой мыши и выберите «Показать на панели элементов» , чтобы отобразить элемент в дереве DOM на панели «Элементы» .
  • Щелкните результат правой кнопкой мыши и выберите «Сохранить как глобальную переменную» , чтобы создать ссылку на переменную для узла, которую можно использовать в консоли .