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

Kayce Basques

Имитировать дефекты зрения

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

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

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

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

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

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

Отправьте отзыв по проблеме Chromium #1003700 или прочитайте больше о реализации .

Эмулировать локали

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

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

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

Отправьте отзыв по проблеме Chromium #1051822 .

Отладка политики Cross-Origin Embedder (COEP)

Панель «Сеть» теперь предоставляет отладочную информацию Cross-Origin Embedder Policy .

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

Раздел «Заголовки ответов» на вкладке «Заголовки» содержит дополнительные рекомендации по решению проблем:

Отправьте отзыв по проблеме Chromium #1051466 .

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

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

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

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

Отправьте отзыв по проблеме Chromium #1041830 .

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

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

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

Закрепить слева от меню команд

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

Отправьте отзыв по проблеме Chromium #1011679 .

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

Опция открытия настроек из главного меню теперь находится в разделе «Дополнительные инструменты» .

Отправьте отзыв по проблеме Chromium #1050855 .

Панель аудита теперь называется панелью Lighthouse .

Команды 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 .
• Сообщить о проблеме DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Твитните @ChromeDevTools .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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