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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • В трассировках консоли под ссылкой «Показать еще N кадров» .
  • В разделе «Источники» > «Стек вызовов» в разделе Флажок. Показывать кадры из списка игнорируемых .

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

Чтобы предоставить вам эти улучшения, команды 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: второй этап

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

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

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

Прекращение поддержки профилировщика JavaScript.

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

Разное

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

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

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

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

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

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

Что нового в DevTools

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