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

Kayce Basques

Эмулировать недостатки зрения

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

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

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

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

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

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

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

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

Теперь вы можете эмулировать локали, указав местоположение в разделе «Датчики» > «Местоположение» . Откройте меню команд и введите 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 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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