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

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

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

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

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

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

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

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

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

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

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

Проблема с хромом: 1288023 .

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

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

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

Чтобы предоставить вам эти улучшения, команды DevTools, Nuxt, Vite и Rollup объединили усилия и внедрили расширение карты источников x_google_ignoreList :

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

Улучшения CSS в Элементах > Стили

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

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

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

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

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

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

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

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

Проблема с хромом: 1420656 .

Новая настройка консоли: автозаполнение при вводе

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

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

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

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

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

Меню команд выделяет созданные файлы

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

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

Проблема с хромом: 1424345 .

Устаревание JavaScript Profiler: второй этап

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

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

Чтобы профилировать производительность ЦП, нажмите Перейти на панель «Производительность» .

Устаревание JavaScript Profiler.

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

Разные моменты

Вот некоторые важные исправления в этом выпуске:

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

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

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

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

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

Что нового в DevTools

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