Что нового в 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 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Панель «Аудит» теперь называется панелью «Маяк» .

Команды DevTools и Lighthouse часто получали отзывы от веб-разработчиков о том, что они слышали о возможности запуска Lighthouse из DevTools, но когда они пошли опробовать его, они не смогли найти панель «Маяк», поэтому панель «Аудит » теперь является Панель маяка .

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

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

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

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

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

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

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

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

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

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

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

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

Связь с командой Chrome DevTools

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

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

Что нового в DevTools

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

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 .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Панель «Аудит» теперь называется панелью «Маяк» .

Команды DevTools и Lighthouse часто получали отзывы от веб-разработчиков о том, что они слышали о возможности запуска Lighthouse из DevTools, но когда они пошли опробовать его, они не смогли найти панель «Маяк», поэтому панель «Аудит » теперь является Панель маяка .

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

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

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

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

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

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

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

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

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

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

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

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

Связь с командой Chrome DevTools

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

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

Что нового в DevTools

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