Поиск и устранение проблем с помощью средства "Проблемы"

Средство "Проблемы " автоматически анализирует текущую веб-страницу, сообщает о проблемах, сгруппированных по типам, а также предоставляет документацию для объяснения и устранения проблем.

Средство "Проблемы " предоставляет отзывы в следующих категориях:

• Доступность.
• Совместимость между браузерами.
• Производительности.
• Прогрессивная веб-приложения.
• Безопасность.
• Других.

Отзывы в средстве "Проблемы" предоставляются несколькими источниками, в том числе платформой Chromium, топором Deque, данными о совместимости браузера MDN и webhint. Сведения об этих источниках отзывов, которые заполняют средство "Проблемы ", см. в следующих разделах:

• Обзор средств axe
• репозиторий browser-compat-data
• webhint

Открытие средства "Проблемы"

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

2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить. Откроются средства разработчика.

3. На панели быстрого просмотра в нижней части devTools выберите вкладку Проблемы , которая присутствует по умолчанию.

   Если панель быстрого просмотра не отображается, выберите Настройка и управление средствами разработки (...), а затем выберите Переключить панель быстрого просмотра (ESC). Если на панели быстрого просмотра нет вкладки Проблемы , на панели быстрого просмотра нажмите кнопку Дополнительные инструменты (+) и выберите Проблемы.

   Средство "Проблемы" групповывает проблемы по категориям, таким как специальные возможности, производительность, безопасность и другие:

   

Другие способы открытия средства "Проблемы"

• На панели действий или на панели быстрого просмотра нажмите кнопку Дополнительные инструменты (+), а затем выберите Проблемы.

• В средстве Элементы в дереве DOM найдите волниво-подчеркнутое имя элемента, а затем нажмите и удерживайте клавишу SHIFT , а затем щелкните элемент. Или щелкните правой кнопкой мыши волнистый подчеркнутой элемент и выберите Пункт Просмотреть проблемы. См . раздел Открытие проблем из дерева DOM ниже.

Инструмент "Размещение проблем": быстрый просмотр или панель действий

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

• На панели быстрого просмотра щелкните правой кнопкой мыши вкладку Проверка , а затем выберите Переместить в верхнюю панель действий или Переместить в левую панель действий.

Проблемы автоматически упорядочиются по серьезности

В каждой категории проблем сначала перечислены ошибки, затем предупреждения и советы:

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

Разверните записи в средстве "Проблемы"

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

1. Откройте веб-страницу и средство "Проблемы" , как описано выше.

2. Выберите проблему. Проблема расширяется, чтобы отобразить подробные сведения:

   

Каждая отображаемая проблема содержит следующие компоненты:

• Заголовок, описывающий проблему.

• Описание с дополнительным контекстом и предлагаемыми решениями.

• Раздел "ЗАТРОНУТЫЕ РЕСУРСЫ ", который ссылается на ресурсы в средствах разработки, такие как элементы, источники или средство "Сеть ".

• Ссылки на дополнительную документацию.

Просмотр проблем в контексте связанного средства

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

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

1. Как описано выше, откройте веб-страницу, откройте Средства разработки, выберите средство Проблемы , а затем разверните проблему.

2. В разделе ЗАТРОНУТЫЕ РЕСУРСЫ по ссылке Открыть щелкните имя средства, например Сеть:

   

   Затронутый ресурс отображается в указанном средстве.

Открытие проблем из дерева DOM

Если с элементом связана проблема, дерево DOM в инструменте Элементы отображает волнистое подчеркивание под именем элемента. Щелкните элемент правой кнопкой мыши и выберите пункт Просмотреть проблемы. Или нажмите и удерживайте клавишу SHIFT , а затем щелкните элемент с волнистым подчеркиванием.

Чтобы отобразить проблему для элементов с волнистыми подчеркиваниями в дереве DOM:

1. Откройте веб-страницу. Например, откройте демонстрационную веб-страницу тестирования специальных возможностей в новом окне или вкладке.

2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите пункт Проверить. Или нажмите клавишу F12. DevTools откроется рядом с веб-страницей.

3. В средствах разработки выберите вкладку Элементы (".

4. В дереве DOM разверните узел <body><main>><article id="cats"><section><img>>>>. Начальный <img> тег элемента имеет волнистый подчеркивание:

   

5. Наведите указатель мыши на начальный <img> тег элемента. Подсказка отображает сведения о проблеме.

6. Щелкните элемент правой <img> кнопкой мыши и выберите Пункт Просмотреть проблемы. Или нажмите и удерживайте клавишу SHIFT , а затем щелкните элемент . Откроется средство "Проблемы ", в котором отображаются проблемы, связанные с этим элементом:

   

Проблемы с фильтрацией

Чтобы уменьшить количество проблем, отображаемых в средстве "Проблемы ", можно отфильтровать список по серьезности, браузеру и источнику.

Фильтрация проблем по серьезности

По умолчанию отображаются только ошибки и предупреждения. Чтобы отобразить проблемы с другими уровнями серьезности, выполните следующие действия:

• В раскрывающемся списке Серьезность выберите любое количество уровней серьезности: Советы, Сведения, Предупреждения или Ошибки:

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

Фильтрация проблем по браузерам

Проблемы, относящиеся к категории Совместимость , также можно фильтровать по браузеру. По умолчанию тестируются следующие браузеры:

• Edge
• Хром
• Firefox
• Safari
• Safari iOS
• Chrome для Android
• Firefox для Android

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

• Щелкните Верхние браузеры.
• Выберите любой из наборов категорий браузеров: Лучшие браузеры, Классические браузеры, Мобильные браузеры.
• Или выберите любое количество отдельных браузеров в списке.
• Щелкните Повторно создать проблемы , чтобы обновить проблемы совместимости на основе выбранных браузеров.

Фильтрация проблем по источнику

По умолчанию средство "Проблемы" выводит список только проблем, относящихся к коду текущей веб-страницы. Чтобы включить проблемы, вызванные сторонними библиотеками или платформами, загруженными веб-страницей, установите флажок Включить сторонние проблемы :

См. также

• Автоматическое тестирование веб-страницы на наличие проблем со специальными возможностями

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и создана Сэмом Даттоном (адвокат разработчика). Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.