Эта страница переведена с помощью Cloud Translation API.

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

Kayce Basques

Добро пожаловать! Новые функции DevTools в Chrome 63 включают в себя:

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

Примечание. Вы можете проверить, какую версию Chrome вы используете, на chrome://version . Chrome автоматически обновляется до новой основной версии примерно каждые 6 недель.

Читайте дальше или посмотрите видео ниже, чтобы узнать больше!

Поддержка многоклиентской удаленной отладки

Если вы когда-либо пробовали отлаживать приложение с помощью IDE, такой как VS Code или WebStorm, вы, вероятно, обнаружили, что открытие DevTools портит сеанс отладки. Эта проблема также делала невозможным использование DevTools для отладки тестов WebDriver.

Начиная с Chrome 63, DevTools теперь поддерживает несколько клиентов удаленной отладки по умолчанию, настройка не требуется.

Многоклиентная удаленная отладка была самой популярной проблемой DevTools номер 1 на crbug.com и номером 3 во всем проекте Chromium. Поддержка нескольких клиентов также открывает немало интересных возможностей для интеграции других инструментов с DevTools или использования этих инструментов по-новому. Например:

Клиенты протокола, такие как ChromeDriver или расширения отладки Chrome для VS Code и Webstorm, а также клиенты WebSocket, такие как Puppeteer, теперь могут работать одновременно с DevTools.
Два отдельных клиента протокола WebSocket, такие как Puppeteer или chrome-remote-interface , теперь могут одновременно подключаться к одной и той же вкладке.
Расширения Chrome, использующие API chrome.debugger , теперь могут работать одновременно с DevTools.
Несколько различных расширений Chrome теперь могут одновременно использовать API chrome.debugger на одной вкладке.

Рабочие пространства 2.0

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

Workspaces 2.0 создан на основе версии 1.0, добавив более полезный пользовательский интерфейс и улучшенное автоматическое сопоставление передаваемого кода. Первоначально планировалось, что эта функция будет выпущена вскоре после Chrome Developer Summit (CDS) 2016, но команда отложила ее, чтобы разобраться с некоторыми проблемами.

Ознакомьтесь с частью «Авторинг» (около 14:28) доклада DevTools на CDS 2016, чтобы увидеть Workspaces 2.0 в действии.

Четыре новых аудита

В Chrome 63 на панели «Аудит» появилось 4 новых аудита:

Подавайте изображения в формате WebP.
Используйте изображения с подходящим соотношением сторон.
Избегайте внешних библиотек JavaScript с известными уязвимостями безопасности.
Ошибки браузера регистрируются в консоли.

См. раздел «Запуск Lighthouse в Chrome DevTools» , чтобы узнать, как использовать панель «Аудит» для улучшения качества ваших страниц.

См. Lighthouse, чтобы узнать больше о проекте, на котором основана панель аудита .

Имитация push-уведомлений с пользовательскими данными

Имитация push-уведомлений уже давно существует в DevTools, но с одним ограничением: нельзя отправлять пользовательские данные. Но благодаря новому текстовому полю Push , появившемуся на панели Service Worker в Chrome 63, теперь вы можете это сделать. Попробуй это сейчас:

Перейдите к демонстрации Simple Push .
Нажмите «Включить push-уведомления» .
Нажмите «Разрешить» , когда Chrome предложит вам разрешить уведомления.
Откройте Инструменты разработчика.
Перейдите на панель Service Workers .
Напишите что-нибудь в текстовом поле Push .
Рисунок 1 . Имитация push-уведомления с пользовательскими данными через текстовое поле Push на панели Service Worker .
Нажмите «Нажать» , чтобы отправить уведомление.
Фигура 2 . Имитированное push-уведомление

Запускайте события фоновой синхронизации с помощью пользовательских тегов

Запуск событий фоновой синхронизации также некоторое время находился на панели Service Workers , но теперь вы можете отправлять собственные теги:

Откройте Инструменты разработчика.
Перейдите на панель Service Workers .
Введите текст в текстовое поле «Синхронизация» .
Нажмите «Синхронизировать» .

Запуск пользовательского события фоновой синхронизации

Рисунок 3 . После нажатия кнопки «Синхронизировать» DevTools отправляет событие фоновой синхронизации с пользовательским тегом update-content сервисному работнику.

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

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

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

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

Отправьте нам предложение или отзыв через crbug.com .
Сообщите о проблеме DevTools, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
Напишите в Твиттере @ChromeDevTools .
Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube » или «Советы по DevTools» на YouTube .