Что нового в DevTools, Chrome 143

Обновления сервера DevTools MCP

Мы внесли ряд улучшений в сервер DevTools MCP и выпустили версию v0.11.0.

  • При вводе запросов в клиенте MCP (Gemini CLI, Cursor и т. д.) теперь можно ссылаться на элементы и сетевые запросы, выбранные на панелях «Элементы» и «Сеть».
  • Инструмент list_console_messages теперь также включает в себя проблемы, обнаруженные на панели Issues .
  • Новый инструмент press_key теперь можно использовать для отладки событий клавиатуры, не связанных с элементами формы.
  • Теперь снимки дерева доступности можно сохранять на диск.
  • Теперь страницы можно перезагружать, при этом кэш можно игнорировать по желанию.
  • Настройте флаг --user-data-dir для использования существующего профиля Chrome.

Полный список изменений и исправлений ошибок можно найти в общедоступном журнале изменений на GitHub , а подробнее о сервере DevTools MCP можно узнать в сообщении в блоге, посвященном анонсу .

Улучшенное совместное использование трассировки

Диалоговое окно «Совместное использование трассировки» на панели «Производительность».

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

  • Содержимое ресурса : копия всех файлов HTML, CSS и JavaScript (за исключением скриптов расширений).
  • Сопоставление исходного кода скрипта : сопоставление с написанным кодом, позволяющее увидеть исходные имена функций и исходные файлы.

Узнайте, чем можно делиться, а что лучше держать в секрете, из нашей обновленной документации .

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

Поддержка @starting-style

В панели «Элементы» теперь поддерживается отладка нового правила CSS @starting-style , которое необходимо для создания анимаций при входе.

Теперь в дереве элементов рядом с соответствующими элементами можно увидеть элемент, отображающий starting-style , переключать состояние starting-style элемента, щелкнув по значку, а также проверять и отлаживать блок @starting-style на вкладке «Стили» .

Виджет редактора для отображения: кладка

Если вы экспериментируете с CSS, то теперь в макетах Masonry можно использовать тот же виджет редактора, что и в макетах display : flex и grid для быстрого переключения между различными вариантами masonry .

Маяк 13

Теперь панель Lighthouse работает на Lighthouse 13. С этим достижением завершается работа по объединению данных об эффективности во всех инструментах разработчика и Lighthouse.

Подробнее читайте в сообщении в блоге, посвященном анонсу . Чтобы узнать, для чего полезен Lighthouse и как он связан с панелью «Производительность» в инструментах разработчика, см. статью «Lighthouse: Оптимизируйте свой веб-сайт» .

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

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

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

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

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

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