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

София Емельянова
Sofia Emelianova
GitHub
Джеселин Йин

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

Теперь вы можете переопределять заголовки ответа на панели «Сеть» . Ранее для экспериментов с заголовками HTTP-ответа требовался доступ к веб-серверу.

С помощью переопределения заголовков ответа вы можете локально создавать прототипы исправлений для различных заголовков, включая, помимо прочего:

Чтобы переопределить заголовок, перейдите в раздел Сеть > Заголовки > Заголовки ответа , наведите курсор на значение заголовка и щелкните. Редактировать. и отредактируйте его.

Ошибка CORS исправлена ​​путем переопределения заголовка.

Вы также можете добавить пользовательские заголовки.

Добавление пользовательского заголовка.

Чтобы отредактировать все переопределения в одном месте, отредактируйте файл .headers в разделе Источники > Переопределения . Там же вы можете нажать кнопку «Добавить правило переопределения» , чтобы переопределить несколько запросов с помощью символов подстановки ( * ).

Редактирование всех переопределений.

Проблема Chromium: 1288023 .

Улучшения в отладке Nuxt, Vite и Rollup.

Чтобы помочь вам быстрее выявлять проблемы во время отладки, улучшенная трассировка стека теперь скрывает кадры, поступающие из исходных файлов, сгенерированных Nuxt 3.3 или более поздней версии. Инструменты разработчика пропускают такие кадры:

Трассировка стека до и после включения функции игнорирования сторонних сервисов.

Для внедрения этих улучшений команды DevTools, Nuxt, Vite и Rollup совместно разработали расширение карты исходного кода x_google_ignoreList :

Команда DevTools хотела бы выразить благодарность командам Nuxt, Vite и Rollup за то, что это стало возможным. Мы ценим ваши усилия и сотрудничество, которые были необходимы для успешной реализации этого проекта. Еще раз благодарим вас за ваш вклад!

Улучшения CSS в разделе «Элементы > Стили».

Недопустимые свойства и значения CSS.

Чтобы помочь вам быстрее диагностировать проблемы с CSS , в панели «Стили» теперь перечеркнуто следующее:

  • Полное объявление CSS (свойство и значение), если свойство CSS недействительно .
  • Отображается только значение, когда свойство CSS допустимо, но само значение недопустимо.

Недопустимое имя свойства и недопустимое значение свойства.

Команда DevTools хотела бы выразить благодарность Yisi (一丝) за внедрение этого улучшения.

Ссылки на ключевые кадры в сокращенном описании анимации

Сокращенная запись свойства CSS animation теперь содержит ссылки на соответствующие правила @keyframes , что позволяет быстрее перемещаться по панели стилей .

Ссылки на ключевые кадры в сокращенном свойстве анимации.

Проблема Chromium: 1420656 .

Новая настройка консоли: автозаполнение при нажатии клавиши Enter.

Начиная с предыдущей версии (112), вы можете настроить консоль инструментов разработчика так, чтобы при нажатии Enter появлялись подсказки автозаполнения.

По умолчанию, чтобы принять подсказку автозаполнения, вы можете нажать клавишу Tab или Arrow right . Чтобы также включить автозаполнение с помощью Enter , включите эту опцию. Настройки. Настройки > Консоль > Флажок. Принять подсказку автозаполнения при нажатии клавиши Enter .

Соответствующий флажок в настройках.

Кроме того, текст еще одной настройки теперь стал более удобным для пользователя: Флажок. Рассматривайте выполнение кода как действие пользователя .

Проблема с Chromium: 1276960 .

Меню команд акцентирует внимание на созданных файлах.

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

Список игнорируемых скриптов в диалоговом окне быстрого открытия до и после внесения изменений.

Номер выпуска Chromium: 1424345 .

Прекращение поддержки JavaScript Profiler: второй этап

Ещё в Chrome 58 команда DevTools планировала в конечном итоге отказаться от JavaScript Profiler и предложить разработчикам Node.js и Deno использовать панель Performance для профилирования производительности JavaScript на ЦП.

В версии DevTools 113 начинается второй этап четырехэтапного прекращения поддержки JavaScript Profiler . На этом этапе вы по-прежнему можете открыть панель, но ее пользовательский интерфейс больше недоступен.

Для анализа производительности процессора нажмите « Перейти в панель «Производительность»» .

Функция JavaScript Profiler устарела.

Проблема с Chromium: 1354548 .

Различные важные моменты

В этом релизе внесены следующие существенные исправления:

  • Исправлена ​​ошибка, из-за которой форматированный вывод в панели «Источники» некорректно обрабатывал имена переменных, содержащие символы Юникода ( 1425055 ).
  • На вкладке « Проблемы» появилось новое сообщение о проблемах автозаполнения, связанных с нестандартными значениями HTML ( 1399414 ).

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

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

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

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

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

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