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

Софья Емельянова
Sofia Emelianova
GitHub

Chrome DevTools (MCP) для вашего ИИ-агента

Теперь вы можете ознакомиться с предварительной версией нового сервера Chrome DevTools Model Context Protocol (MCP). Он позволяет использовать возможности Chrome DevTools для ИИ-помощников по программированию.

Раньше программисты-программисты не могли видеть, что именно делает сгенерированный ими код при запуске в браузере. Сервер Chrome DevTools MCP меняет это. ИИ-помощники по программированию могут отлаживать веб-страницы прямо в Chrome, используя возможности отладки и аналитику производительности DevTools. Это повышает точность выявления и устранения проблем.

Посмотрите сами, как это работает:

Более подробную информацию о вашем ИИ-агенте можно найти в Chrome DevTools (MCP) .

Отладка дерева сетевых зависимостей с помощью Gemini

В разделе «Производительность» > «Аналитика» > «Аналитика дерева сетевых зависимостей» теперь есть кнопка «Отладка с помощью ИИ» , которая открывает панель помощи ИИ , где вы можете обсудить и отладить указанное дерево с помощью Gemini.

Вид до и после добавления кнопки «Отладка с помощью ИИ» в представление «Дерево сетевых зависимостей».

Экспортируйте свои чаты с Gemini

Теперь вы можете экспортировать текущий чат с Gemini или скопировать его ответ в буфер обмена, нажав кнопку «Экспортировать беседу» на верхней панели действий или «Скопировать ответ» под сообщением Gemini в чате.

До и после добавления кнопки экспорта и копирования в помощь ИИ.

Сохраненная конфигурация трека на панели «Производительность»

При настройке записанного трека на панели «Производительность» DevTools теперь сохраняет вашу конфигурацию и применяет ее при обратном импорте или записи нового.

Фильтрация сетевых запросов с защищенным IP-адресом

На панели «Сеть» теперь можно фильтровать запросы, отправляемые на прокси-серверы IP Protection.

До и после добавления фильтра «Запросы с защищенным IP-адресом» на панель «Сеть».

Вкладка «Элементы» > «Макет» добавляет поддержку макета кладки

Теперь вы можете проверить схему кладки на вкладке Элементы > Стили .

Кладка — метод планировки, при котором одна ось использует типичную строгую сетку планировки, чаще всего колонны, а другая — кладочную планировку.

До и после добавления поддержки макета кладки в Элементы - Макет.

Маяк 12.8.2

Панель Lighthouse теперь работает под управлением Lighthouse 12.8.2.

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

См. также полный список изменений .

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

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

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

Вот некоторые из многих заметных исправлений и улучшений в этом выпуске:

  • Производительность : события обратного вызова Request Idle теперь включают свойство timeout ( crbug.com/441679219 ).
  • Доступность . Программы чтения с экрана теперь будут озвучивать следующее:
    • «Это новая функция» для продвигаемых пунктов меню команд ( crbug.com/441485154 ).
    • Панель инструментов сводки автодополнения кода ( crbug.com/433952045 ).
  • Сеть : Щелчок правой кнопкой мыши по элементу сетевого журнала выбирает его ( crbug.com/368510578 ).

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

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

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

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

Что нового в DevTools

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