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

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

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

  • При выполнении запросов в клиенте MCP (Gemini CLI, Cursor, ...) теперь можно ссылаться на элементы и сетевые запросы, выбранные на панелях «Элементы» и «Сеть».
  • Инструмент list_console_messages теперь также включает проблемы, обнаруженные на панели «Проблемы» .
  • Новый инструмент 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. На этом этапе завершается работа по объединению аналитики производительности в DevTools и Lighthouse.

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

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

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

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

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

Что нового в DevTools

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