Поделиться через

Навигация по devTools с помощью специальных возможностей

  • Статья

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

Сведения о функциях DevTools, связанных с улучшением специальных возможностей веб-страницы, см. в разделе Функции тестирования специальных возможностей.

Панели инструментов с вкладками, содержащие вкладки и страницы

Терминологию вкладок, инструментов и панелей см. в разделе Панели инструментов с вкладками, содержащие вкладки и страницы в обзоре средств разработки.

С технической стороны вкладки представляют собой список вкладок ARIA.

Сочетания клавиш

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

Открытие средств разработки

В Microsoft Edge можно открыть средства разработки с помощью мыши или клавиатуры любым из следующих способов. Какое средство открывается, зависит от способа открытия средств разработки.

Основные способы:

Действие Результирующий инструмент
Щелкните правой кнопкой мыши любой элемент на веб-странице и выберите пункт Проверить. Инструмент "Элементы " с деревом DOM, развернутый для отображения элемента страницы, щелкнув его правой кнопкой мыши.
Нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Ранее использовавшийся инструмент или средство приветствия .
Нажмите клавишу F12. Ранее использовавшийся инструмент или средство приветствия .

Дополнительные способы:

Действие Результирующий инструмент
На панели инструментов Microsoft Edge выберите Параметры и прочее (значок >Дополнительные инструменты>Средства разработчика. Ранее использовавшийся инструмент или средство приветствия .
Нажмите клавиши CTRL+SHIFT+J (Windows, Linux) или COMMAND+OPTION+J (macOS). Средство "Консоль ".
Нажмите клавиши CTRL+SHIFT+C (Windows, Linux) или COMMAND+OPTION+C (macOS). Инструмент "Элементы " с деревом DOM, развернутый для отображения <body> элемента.
Нажмите клавиши SHIFT+F10 , чтобы открыть контекстное меню. Чтобы выбрать команду Проверить , нажмите клавишу СТРЕЛКА ВВЕРХ , а затем ВВОД. Инструмент "Элементы " с деревом DOM, развернутый для отображения <html> элемента.
Нажмите клавиши TAB или SHIFT+TAB , чтобы переместить фокус на элемент страницы. Затем нажмите клавиши SHIFT+F10 , чтобы открыть контекстное меню. Чтобы выбрать команду Проверить , нажмите клавишу СТРЕЛКА ВВЕРХ , а затем ВВОД. Инструмент "Элементы " с деревом DOM, развернутый для отображения элемента страницы с фокусом.

Вы можете перемещаться между инструментами с помощью клавиш навигации с клавиатуры или с помощью меню команд.

  • Открыв средства разработки, нажмите клавиши CTRL+] (Windows, Linux) или COMMAND+] (macOS), чтобы переместить фокус на следующий инструмент на панели действий.

  • Нажмите клавиши CTRL+[ (Windows, Linux) или COMMAND+[ (macOS), чтобы переместить фокус на предыдущее средство на панели действий.

  • Нажимайте клавиши TAB или SHIFT+TAB, пока фокус не переместится на вкладки панели действий или панели быстрого просмотра, а затем используйте клавиши со стрелками для перемещения между инструментами.

Известные проблемы

  • Некоторые средства, такие как консоль и средства производительности , могут перемещать фокус в область содержимого средства сразу после выбора средства. Это может затруднить навигацию по клавишам со стрелками.

  • Имя выбранного средства объявляется, но только после объявления о содержимом в инструменте. Эта последовательность объявлений может легко пропустить имя средства.

Чтобы выбрать определенное средство, используйте меню Команд. В меню команд средство отображается как элемент Панели или Быстрого просмотра .

  1. Открыв средства разработки, нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS), чтобы открыть меню Команд.

    Меню команд представляет собой нечеткое поле со списком автозаполнения поиска.

  2. Введите имя средства, а затем используйте стрелку ВНИЗ на клавиатуре, чтобы перейти к правильному параметру.

  3. Нажмите клавишу ВВОД , чтобы выполнить команду.

Чтобы открыть средство "Элементы ", выполните следующие действия:

  1. Откройте меню Команда.

  2. Начните вводить элементы, выберите команду Показать элементы и нажмите клавишу ВВОД.

Открытие средства таким образом помещает фокус в область содержимого средства. В случае с инструментом Элементы фокус перемещается в дерево DOM.

Инструмент "Элементы"

Проверка элемента на странице

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

  2. Щелкните элемент правой кнопкой мыши и выберите параметр Проверить . Откроется инструмент Элементы и будет фокусироваться элемент в дереве DOM.

Дерево DOM выложено как дерево ARIA. Пример см. в статье Навигация по дереву DOM с помощью клавиатуры.

Копирование кода для элемента в дереве DOM

  1. Щелкните правой кнопкой мыши узел в дереве DOM.

  2. Разверните параметр Копировать .

  3. Выберите Копировать внешнийHTML.

Известные проблемы

  • Copy outerHTML часто не выбирает текущий узел, а выбирает родительский узел. Однако содержимое элемента по-прежнему должно находиться в скопированном outerHTML.

Изменение атрибутов элемента в дереве DOM

  • Когда фокус находится на узле дерева DOM, нажмите клавишу ВВОД , чтобы изменить узел.

  • Нажмите клавишу TAB , чтобы перемещаться между значениями атрибутов. Когда вы услышите слово "пробел", вы находитесь внутри пустого текстового ввода и можете ввести новое значение атрибута.

  • Нажмите клавиши CTRL+ВВОД (Windows, Linux) или COMMAND+ВВОД (macOS), чтобы принять изменения и прослушать все содержимое элемента.

Известные проблемы

  • При вводе текста вы не получите отзыв. Если вы сделаете опечатку и используете клавиши со стрелками для изучения входных данных, вы также не получите отзывов. Самый простой способ проверка свою работу — принять изменения, а затем прослушать объявление всего элемента.

Изменение HTML элемента в дереве DOM

  • Когда фокус находится на узле дерева DOM, нажмите клавишу ВВОД , чтобы изменить узел.

  • Нажмите клавишу TAB , чтобы перемещаться между значениями атрибутов. Когда вы услышите имя элемента, например , h2вы находитесь внутри текстового ввода и можете изменить тип элемента.

  • Чтобы принять изменения, нажмите клавиши CTRL+ВВОД (Windows, Linux) или COMMAND+ВВОД (macOS).

Например, при вводе h3 и нажатии клавиш CTRL+ВВОД (Windows, Linux) или COMMAND+ВВОД (macOS) начальные и конечные h3 теги элемента изменяются.

Вкладки в инструменте "Элементы"

Инструмент Elements содержит дополнительные вкладки для проверки таких элементов, как CSS, примененный к элементу, или соответствующее место в дереве специальных возможностей.

  • Когда фокус находится на дереве DOM, нажимайте клавишу TAB , пока не услышите, что выбрана область Стили .

  • Нажмите клавишу СТРЕЛКА ВПРАВО , чтобы просмотреть другие доступные вкладки.

Дерево DOM превращает элементы с href атрибутами в ссылки, доступные для фокусировки, поэтому для доступа к области Стили может потребоваться несколько раз нажать клавишу TAB.

Известные проблемы

Вкладки Точки останова и Свойства модели DOM недоступны с клавиатуры.

Панель "Стили"

В области Стили есть элементы управления для фильтрации стилей, переключения состояний элементов (например, :active и :focus), переключения классов и добавления новых классов. Существует также мощное средство проверки стиля для изучения и изменения стилей, применяемых в настоящее время к элементу, который имеет фокус в дереве DOM.

Основная концепция, которую необходимо понять в области Стили , заключается в том, что в ней отображаются только стили для выбранного в данный момент узла в дереве DOM. Например, предположим, что вы выполнили проверку стилей <header> узла и теперь хотите просмотреть стили для <footer> узла. Для этого сначала необходимо выбрать <footer> узел в дереве DOM.

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

Так как все инструменты стиля так или иначе подключаются к панели Стили , имеет смысл сначала стать экспертом в этом инструменте.

  • С фокусом на панели Стили нажмите клавишу TAB , чтобы переместить фокус внутри и просмотреть содержимое.

  • Нажимайте клавишу TAB , пока первый стиль не станет активным. Если вы используете средство чтения с экрана, первый стиль объявлен как element.style {}.

  • Нажмите клавишу СТРЕЛКА ВНИЗ , чтобы перемещаться по списку стилей в порядке специфичности. Средство чтения с экрана объявляет каждый стиль, начиная с имени CSS-файла, номера строки, в которой отображается стиль, и имени стиля. Например, main.css:233 .card__img {}.

  • Нажмите клавишу ВВОД , чтобы просмотреть стиль более подробно. Фокус начинается с редактируемой версии имени стиля.

  • Нажмите клавишу TAB , чтобы перейти между редактируемыми версиями каждого свойства CSS и соответствующими значениями. В конце каждого блока стилей находится пустое редактируемое текстовое поле, которое можно использовать для добавления дополнительных свойств CSS.

  • Вы можете продолжить нажимать клавишу TAB , чтобы перемещаться по списку стилей, или нажать клавишу ESCAPE , чтобы выйти из режима и вернуться к переходу по клавишам со стрелками.

Дополнительные сочетания клавиш см. в статье Справочник по клавиатуре области стилей.

Известные проблемы

  • Если вы используете поле Фильтр редактируемого текста, вы не сможете перемещаться по списку стилей.
Переключение состояния элемента

Переключение состояния элемента, например :active или :focus:

  1. Перейдите в область Стили и нажимайте клавишу TAB , пока не будет фокус на кнопке Переключить состояние элемента .

  2. Нажмите клавишу ВВОД , чтобы отобразить раздел Состояние элемента Force , содержащий флажки.

  3. Нажимайте клавишу TAB , пока первое :activeсостояние , не перейдет в фокус.

  4. Нажмите клавишу ПРОБЕЛ , чтобы установить (включить) флажок. Если выбранный в данный момент элемент в дереве DOM имеет :active стиль, он теперь применяется.

  5. Нажмите клавишу TAB , чтобы просмотреть все доступные состояния.

Добавление существующего класса

Кнопка Классы элементов находится рядом с кнопкой Переключить состояние элемента . Чтобы переместить фокус на кнопку Классы элементов , нажмите клавишу TAB, а затем нажмите клавишу ВВОД. Фокус перемещается в текстовое поле редактирования с меткой Добавить новый класс.

Кнопка Классы элементов в основном используется для добавления существующих классов в элемент. Например, если таблица стилей содержит вспомогательный класс с именем .clearfix, можно нажать внутри . текстового поля редактирования, чтобы отобразить список предложений классов, и использовать стрелку вниз для поиска .clearfix предложения. Или введите имя класса самостоятельно и нажмите клавишу ВВОД , чтобы применить его.

Добавление нового правила стиля

Рядом с кнопкой Классы элементов находится кнопка Создать правило стиля . Чтобы переместить фокус на него, нажмите клавишу TAB , а затем клавишу ВВОД. Фокус перемещается в редактируемое текстовое поле внутри инспектора стилей. Исходное текстовое содержимое поля — это имя тега элемента, выбранного в дереве DOM. Вы можете ввести любое имя класса в это поле, а затем нажать клавишу TAB , чтобы назначить ему свойства CSS.

Вкладка "Вычисленная"

С фокусом на вкладке Вычисляется , нажмите клавишу TAB , чтобы переместить фокус внутри и просмотреть содержимое. На вкладке Вычислено есть элементы управления для изучения того, какие свойства CSS фактически применяются к элементу в порядке специфичности.

Изучение всех вычисляемых стилей

Нажимайте клавишу TAB , пока не достигнете коллекции вычисляемых стилей. Вычисляемые стили представлены в виде дерева ARIA. Развертывание списка показывает, какие селекторы CSS применяют вычисленный стиль. Эти селекторы организованы по специфике. Средство чтения с экрана объявляет вычисленное значение, с которым в настоящее время соответствует селектор CSS, имя файла таблицы стилей, содержащей селектор, и номер строки для селектора.

Известные проблемы

  • Если вы используете поле Фильтр текста, вы больше не сможете проверять стили.

Вкладка "Прослушиватели событий"

Чтобы проверить прослушиватели событий, применяемые к элементу, выберите инструмент Элементы , а затем перейдите на вкладку Прослушиватели событий (сгруппированные с вкладкой Стили ).

Когда фокус находится на вкладке Стили , нажмите стрелку вправо , чтобы перейти на вкладку Прослушиватели событий .

Изучение прослушивателей событий

Прослушиватели событий представлены в виде дерева ARIA. Для навигации по ним можно использовать клавиши со стрелками. Средство чтения с экрана объявляет имя объекта DOM, к которому подключен прослушиватель событий, а также имя файла, в котором определен прослушиватель событий, и номер строки.

Вкладка "Специальные возможности"

Нажмите клавишу TAB , чтобы перейти на вкладку Специальные возможности в инструменте Элементы .

Вкладка Специальные возможности находится рядом с вкладкой Стили. На вкладке Специальные возможности находятся элементы управления для изучения дерева специальных возможностей, атрибутов ARIA, применяемых к элементу, и вычисляемых свойств специальных возможностей. См . раздел Проверка специальных возможностей с помощью вкладки Специальные возможности.

Дерево специальных возможностей

Дерево специальных возможностей представлено в виде дерева ARIA, где каждое из них treeitem соответствует элементу в модели DOM. Дерево объявляет вычисленную роль для выбранного узла. Универсальные элементы, такие как div и span , объявляются в дереве как GenericContainer. Используйте клавиши со стрелками для обхода дерева и изучения связей "родители-потомки".

Известные проблемы

  • Тип дерева ARIA , используемого вкладкой Специальные возможности , может быть неправильно представлен в Microsoft Edge для средств чтения с экрана macOS, например VoiceOver. Подпишитесь на Chromium выпуск No 868480, чтобы получать сведения о ходе работы по этой проблеме.
  • Каждый из разделов Атрибуты ARIA и Вычисляемые свойства помечаются как дерево ARIA, но каждый раздел в настоящее время не имеет управления фокусом и не поддерживает клавиатуру.

Сохранение подсказки средства проверки и наложение цвета сетки

Когда вы нажимаете кнопку Проверить инструмент и перемещаетесь по отображаемой веб-странице, подсказка проверки изменяется. Чтобы отобразить текущую подсказку и наложение цвета сетки, нажмите и удерживайте клавиши CTRL+ALT (Windows, Linux) или CTRL+OPTION (macOS) во время перемещения по отображаемой веб-странице.

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

См. раздел Анализ страниц с помощью средства проверки.

Инструмент Lighthouse

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

Настройка и создание отчета

  1. Когда средство Lighthouse впервые открывается в средствах разработки, фокус помещается на кнопку Создать отчет . По умолчанию форма настроена для запуска отчетов для каждой категории с помощью эмуляции мобильных устройств в имитированном подключении 3G.

  2. Чтобы изменить параметры отчета, используйте клавиши SHIFT+TAB , чтобы сосредоточиться на параметрах Lighthouse, или перейдите обратно в режиме обзора.

  3. Когда вы будете готовы к запуску отчета, вернитесь к кнопке Создать отчет и нажмите клавишу ВВОД.

  4. Фокус перемещается в модальное окно с кнопкой Отмена , которая позволяет выйти из аудита. При выполнении аудита и обновлении страницы несколько раз может быть услышана серий наушников.

Известные проблемы

  • Различные разделы формы конфигурации в настоящее время не помечены элементом fieldset . Может быть проще перемещаться по ним в режиме обзора, чтобы выяснить, какие элементы управления связаны с каждым разделом.
  • После завершения аудита не будет объявлено о наушниковом или регионе реального времени. Обычно аудит занимает около 30 секунд, после чего вы сможете перейти к результатам. Самый простой способ получить результаты с помощью режима обзора.

Отчет Lighthouse состоит из разделов, соответствующих каждой из категорий аудита. Откроется отчет со списком оценок для каждой категории. Эти оценки также являются ссылками, которые можно использовать для перехода к соответствующим разделам. В каждом разделе находятся расширяемые details элементы, которые содержат сведения о пройденных или неудачных аудитах. По умолчанию отображаются только неудачные аудиты. Каждый раздел заканчивается последним details элементом, который содержит все пройденные аудиты.

Чтобы выполнить новый аудит, используйте клавиши SHIFT+TAB , чтобы выйти из отчета и нажмите кнопку Создать отчет .

См. также

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Роб Додсон.

Creative Commons License Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.