Что нового в DevTools (Chrome 83)

Kayce Basques

Имитация нарушений зрения

Откройте вкладку «Рендеринг» и воспользуйтесь новой функцией «Имитация нарушений зрения» , чтобы лучше понять, как люди с различными типами нарушений зрения воспринимают ваш сайт.

Имитация размытого зрения.

Инструменты разработчика позволяют имитировать размытое зрение и следующие типы нарушений цветового зрения :

• Протанопия: неспособность воспринимать красный свет.
• Дейтеранопия: неспособность воспринимать любой зеленый свет.
• Тританопия: неспособность воспринимать синий свет.
• Ахроматопсия: неспособность различать какие-либо цвета, кроме оттенков серого (крайне редкое явление).

Существуют и менее выраженные варианты этих нарушений цветового зрения, и на самом деле они встречаются чаще. Например, протаномалия — это сниженная чувствительность к красному свету (в отличие от протанопии , которая представляет собой полную неспособность воспринимать красный свет). Однако эти нарушения зрения, обозначаемые окончанием -омалия, не так четко определены: каждый человек с таким нарушением зрения индивидуален и может видеть вещи по-разному (воспринимать больше/меньше соответствующих цветов).

Благодаря использованию инструментов разработки DevTools для моделирования экстремальных состояний, ваши веб-приложения гарантированно будут доступны людям с протаномалией, дейтераномалией, тританомалией и ахроматомалией.

Отправьте отзыв в обсуждение Chromium #1003700 или ознакомьтесь с дополнительной информацией о реализации .

Имитация локаций

Теперь вы можете эмулировать языковые настройки, указав местоположение в разделе «Датчики» > «Местоположение» . Откройте командное меню и введите Sensors , чтобы перейти на вкладку «Датчики» . После выполнения этих действий DevTools изменит текущую языковую настройку по умолчанию, что повлияет на следующее:

• API Intl.* , например, new Intl.NumberFormat().resolvedOptions().locale
• другие JavaScript API, учитывающие локаль, такие как String.prototype.localeCompare и *.prototype.toLocaleString , например, 123_456..toLocaleString()
• API DOM, такие как navigator.language и navigator.languages
• заголовок HTTP-запроса Accept-Language

Ознакомьтесь с примером кода, зависящим от локали, чтобы попробовать это самостоятельно.

Отправьте отзыв в репозиторий Chromium под номером #1051822 .

Отладка политики встраивания из разных источников (COEP)

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

В столбце «Статус» теперь отображается краткое объяснение причины блокировки запроса, а также ссылка для просмотра заголовков этого запроса для дальнейшей отладки:

В разделе «Заголовки ответа» на вкладке «Заголовки» содержится дополнительная информация о том, как устранить возникшие проблемы:

Отправьте отзыв в обсуждение Chromium под номером #1051466 .

Новые значки для точек останова, условных точек останова и точек логирования.

В панели «Источники» появились новые значки для точек останова, условных точек останова и точек логирования:

• Точки останова обозначены красными кругами.
• Условные точки останова Они представлены кругами, наполовину красными, наполовину белыми.
• Точки логарифма Они обозначены красными кругами со значками консоли.

Целью создания новых значков было сделать пользовательский интерфейс более согласованным с другими инструментами отладки с графическим интерфейсом (которые обычно окрашивают точки останова в красный цвет) и упростить быстрое различение этих трех функций.

Отправьте отзыв в обсуждение Chromium под номером #1041830 .

Просмотрите сетевые запросы, которые устанавливают определенный путь к cookie-файлу.

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

Воспользуйтесь функцией фильтрации запросов по свойствам , чтобы найти больше специальных ключевых слов, таких как cookie-path .

Прикрепите панель слева из командного меню.

Откройте командное меню и выполните Dock to left , чтобы переместить инструменты разработчика в левую часть области просмотра.

Отправьте отзыв в обсуждение Chromium под номером #1011679 .

Пункт Settings в главном меню перемещен.

Теперь возможность открыть «Настройки» из главного меню можно найти в разделе «Дополнительные инструменты» .

Отправьте отзыв в репозиторий Chromium под номером #1050855 .

Комитет по аудиту теперь называется «Комитет маяка ».

Команды DevTools и Lighthouse часто получали отзывы от веб-разработчиков о возможности запуска Lighthouse из DevTools, но при попытке это проверить они не находили панель "Lighthouse", поэтому панель "Аудиты " теперь является панелью Lighthouse .

Удалите все локальные переопределения в папке.

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

Отправьте отзыв в обсуждение Chromium под номером #1016501 .

Обновлен пользовательский интерфейс для длительных задач.

« Длительная задача» — это код JavaScript, который монополизирует основной поток на длительное время, вызывая зависание веб-страницы.

Визуализация длительных задач на панели «Производительность» была доступна уже некоторое время, но в Chrome 83 интерфейс визуализации длительных задач на панели «Производительность» был обновлен. Теперь длительная часть задачи отображается с полосатым красным фоном.

Отправьте отзыв в обсуждение Chromium под номером #1054447 .

Поддержка маскируемых значков в панели «Манифест».

В Android Oreo появились адаптивные значки, которые отображают значки приложений в различных формах на разных моделях устройств. Маскируемые значки — это новый формат значков, поддерживающий адаптивные значки, который позволяет гарантировать, что значок вашего PWA будет хорошо выглядеть на устройствах, поддерживающих стандарт маскируемых значков.

Включите новый флажок «Показывать только минимальную безопасную область для маскируемых значков» на панели «Манифест» , чтобы убедиться, что ваш маскируемый значок будет хорошо выглядеть на устройствах Android Oreo. Подробнее см. в разделе «Готовы ли мои текущие значки?» .

Загрузите предварительные каналы

Рекомендуем использовать Chrome Canary , Dev или Beta в качестве браузера по умолчанию для разработки. Эти предварительные версии предоставляют доступ к новейшим функциям DevTools, позволяют тестировать передовые API веб-платформ и помогают выявлять проблемы на вашем сайте до того, как их обнаружат пользователи!

Свяжитесь с командой Chrome DevTools

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

• Отправляйте нам свои отзывы и предложения по улучшению функционала на сайте crbug.com .
• Сообщить о проблеме в инструментах разработчика можно с помощью параметра more_vert. Дополнительные параметры > Справка > Сообщить о проблеме в инструментах разработчика .
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к видеороликам YouTube «Что нового в инструментах разработчика» или «Советы по инструментам разработчика» на YouTube .

Что нового в инструментах разработчика

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