Проблемы: Найдите и устраните проблемы.

Sam Dutton

Sofia Emelianova

Панель «Проблемы» в Chrome DevTools снижает утомляемость уведомлениями и беспорядок в консоли . Используйте его, чтобы найти решения проблем, обнаруженных браузером, таких как проблемы с файлами cookie и смешанный контент.

Примечание. На панели «Проблемы» продолжает добавляться поддержка новых типов задач.

На данный момент панель «Проблемы» поддерживает:

• Проблемы с файлами cookie
• Смешанный контент
• Проблемы COEP
• Ошибки CORS
• Проблемы с режимом Quirks
• (Предварительная версия) Проблемы с низкой контрастностью
• Проблемы с доверенной веб-активностью
• Проблемы с загрузкой таблицы стилей
• Неверные правила CSS @property
• Нарушения Политики безопасности контента
• Проблемы с атрибутами автозаполнения

Будущие версии Chrome будут поддерживать больше типов проблем.

Откройте панель «Проблемы»

1. Посетите страницу с проблемами, которые необходимо исправить, например Samesite-sandbox.glitch.me .
2. Откройте Инструменты разработчика .

3. Нажмите кнопку «Открыть проблемы» рядом с Настройки в правом углу панели действий вверху. В зависимости от серьезности проблемы кнопка может иметь красный цвет. , желтый , или синий икона.

   

   Либо выберите «Проблемы» в Меню дополнительных инструментов .

   

4. Когда вы окажетесь на панели «Проблемы» , возможно, вам захочется перезагрузить страницу, чтобы выявить еще больше проблем, на этот раз возникающих во время загрузки страницы.

   

Консоль также может отображать проблемы, о которых сообщает браузер . Однако вы заметите, что такие проблемы (например, предупреждение о файлах cookie на снимке экрана ниже) трудно понять. Непонятно, что нужно сделать, чтобы это исправить.

С другой стороны, панель «Проблемы» предоставляет вам полезную информацию.

Просмотр элементов на панели «Проблемы»

На панели «Проблемы» предупреждения браузера представлены в структурированном, агрегированном и практическом виде.

1. Щелкните элемент на панели «Проблемы» , чтобы развернуть проблему и получить инструкции по ее устранению и поиску затронутых ресурсов.

   

   Каждый предмет состоит из четырех компонентов:

   • Заголовок, описывающий проблему.
   • Описание, предоставляющее контекст и решение.
   • Раздел «ЗАТРУДНЕННЫЕ РЕСУРСЫ» , который ссылается на ресурсы в соответствующем контексте DevTools, такие как «Сеть» , «Источники» , «Элементы» и другие панели.
   • Ссылки на дальнейшее руководство.

2. Щелкните элементы в разделе «ЗАТРУДНЕННЫЕ РЕСУРСЫ» , чтобы просмотреть проблемы в контексте .

Группировать проблемы по типу

Примечание. Эта функция предварительного просмотра отключена по умолчанию. Чтобы включить его, проверьте Настройки > Эксперименты > Разрешить группировку и скрытие задач по типу проблемы .

Панель «Проблемы» подсчитывает количество затронутых ресурсов для каждой проблемы и показывает его рядом с заголовками. Кроме того, вы можете организовать проблемы по их серьезности в три типа групп:

• Ошибки страницы , о которых сообщает Chrome.
• Критические изменения , такие как прекращение поддержки.
• Улучшения , предлагаемые DevTools.

Чтобы сгруппировать проблемы, установите флажок Группируйте по типу на панели действий в верхней части панели «Проблемы» .

Включить сторонние проблемы

На панели «Проблемы» по умолчанию отображаются проблемы со сторонними файлами cookie.

Проблемы со сторонними файлами cookie можно найти в разделе «ЗАТРУДНЕННЫЕ РЕСУРСЫ», где отсутствует ссылка.

Чтобы скрыть такие проблемы, очистите Включите проблемы со сторонними файлами cookie в панель действий в верхней части панели «Проблемы» .

Скрыть проблемы

Чтобы скрыть проблему, выберите « Скрыть подобные проблемы» на трехточечное меню рядом с проблемой.

Чтобы просмотреть список скрытых проблем, прокрутите вниз до раздела «Скрытые проблемы» и разверните его.

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

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

Просмотр проблем в контексте

Чтобы изучить проблему:

1. В разделе «ЗАТРУДНЕННЫЕ РЕСУРСЫ» щелкните ссылку на ресурс, чтобы просмотреть элемент в соответствующем контексте в DevTools. В этом примере нажмите на samesite-sandbox.glitch.me , чтобы отобразить файлы cookie, прикрепленные к этому запросу. Ссылка приведет вас на панель «Сеть» .

   

2. Прокрутите страницу, чтобы просмотреть элемент с проблемой: в данном случае файл cookie ck02 . Наведите курсор на значок информации справа, чтобы увидеть проблему и способы ее устранения.