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

Kayce Basques

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

• Новая панель «Аудит» , включающая тесты прогрессивных веб-приложений, производительности, доступности и лучших практик.
• Сторонние значки . Узнайте, какие третьи стороны отправляют сетевые запросы, входят в консоль и выполняют JavaScript.
• Продолжить здесь . Новый жест, который может ускорить рабочий процесс отладки JavaScript.
• Предсказуемая отладка асинхронного JavaScript .
• Предварительный просмотр объектов в Консоли .
• Обновления в реальном времени на вкладке «Покрытие» .
• Новое меню выбора контекстов в Консоли .
• Упрощенные варианты регулирования сети .
• По умолчанию трассировка асинхронного стека включена .

Посмотрите видеоверсию примечаний к выпуску ниже или читайте дальше, чтобы узнать больше.

Новые возможности

Новая панель аудитов на базе Lighthouse

Панель «Аудит» теперь поддерживается Lighthouse . Lighthouse предоставляет полный набор тестов для измерения качества ваших веб-страниц.

Оценки вверху по категориям «Прогрессивное веб-приложение» , «Производительность» , «Доступность » и «Лучшие практики» — это ваши совокупные оценки по каждой из этих категорий. Остальная часть отчета представляет собой разбивку каждого теста, по которому были определены ваши баллы. Улучшите качество вашей веб-страницы, исправив неудачные тесты.

Рисунок 1 . Отчет Маяка

Чтобы проверить страницу:

1. Откройте вкладку «Аудит» .
2. Нажмите «Выполнить аудит» .
3. Нажмите Запустить аудит . Lighthouse настраивает DevTools для эмуляции мобильного устройства, запускает серию тестов на странице, а затем отображает результаты на панели «Аудит» .

Маяк на Google I/O '17

Ознакомьтесь с докладом DevTools на Google I/O '17 ниже, чтобы узнать больше об интеграции Lighthouse в DevTools.

Внести свой вклад в Маяк

Lighthouse — проект с открытым исходным кодом. Чтобы узнать больше о том, как это работает и как внести в это свой вклад, ознакомьтесь с докладом Lighthouse на Google I/O '17 ниже.

Есть идея провести аудит Lighthouse? Разместите это здесь!

Сторонние значки

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

Рисунок 2 . Наведение курсора на значок стороннего производителя на панели «Сеть»

Рисунок 3 . Наведение курсора на сторонний значок в консоли

Чтобы включить сторонние значки:

1. Откройте командное меню .
2. Запустите команду Show third party badges .

Используйте параметр «Группировать по продукту» на вкладках « Дерево вызовов» и «Снизу вверх», чтобы сгруппировать действия по регистрации производительности по сторонним объектам, вызвавшим эти действия. См. раздел «Начало работы с анализом производительности среды выполнения», чтобы узнать, как анализировать производительность с помощью DevTools.

Рисунок 4 . Группировка по товарам на вкладке «Снизу вверх» .

Новый жест для продолжения здесь

Предположим, вы остановились на строке 25 сценария и хотите перейти к строке 50. Раньше вы могли установить точку останова на строке 50 или щелкнуть строку правой кнопкой мыши и выбрать «Продолжить здесь» . Но теперь есть более быстрый способ управления этим рабочим процессом.

При пошаговом выполнении кода удерживайте Command (Mac) или Control (Windows, Linux), а затем щелкните, чтобы перейти к этой строке кода. DevTools выделяет места назначения, по которым можно прыгать, синим цветом.

Рисунок 5 . Продолжить здесь

См. раздел «Начало работы с отладкой JavaScript», чтобы изучить основы отладки в DevTools.

Шаг в асинхронность

Основная задача команды DevTools в ближайшем будущем — сделать предсказуемой отладку асинхронного кода и предоставить вам полную историю асинхронного выполнения.

Новый жест «Продолжить сюда» также работает с асинхронным кодом. Когда вы удерживаете Command (Mac) или Control (Windows, Linux), DevTools выделяет доступные для перехода асинхронные места назначения зеленым цветом.

В качестве примера посмотрите демонстрацию ниже из выступления DevTools на I/O.

Изменения

Более информативный предварительный просмотр объектов в консоли.

Раньше, когда вы регистрировали или оценивали объект в консоли, консоль отображала только Object , что не особенно полезно. Теперь консоль предоставляет больше информации о содержимом объекта.

Рисунок 6 . Как консоль использовалась для предварительного просмотра объектов

Рисунок 7 . Как консоль теперь просматривает объекты

Более информативное контекстное меню выбора в Консоли

Меню выбора контекста консоли теперь предоставляет больше информации о доступных контекстах.

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

Рисунок 8 . При наведении курсора на iframe в новом меню выбора контекста он выделяется в области просмотра.

Обновления в режиме реального времени на вкладке «Покрытие».

При записи покрытия кода в Chrome 59 на вкладке «Покрытие» просто отображалось «Запись...», без возможности узнать, какой код использовался. Теперь вкладка «Покрытие» в режиме реального времени показывает, какой код используется.

Рисунок 9 . Загрузка страницы и взаимодействие с ней с помощью старой вкладки «Покрытие»

Рисунок 10 . Загрузка страницы и взаимодействие с ней с помощью новой вкладки «Покрытие» .

Упрощенные варианты регулирования сети

Меню регулирования сети на панелях «Сеть» и «Производительность» были упрощены и теперь включают только три параметра: «Автономно» , «Медленный 3G» , который распространен в таких местах, как Индия, и «Быстрый 3G» , который распространен в таких местах, как США.

Рисунок 11 . Новые возможности регулирования сети

Параметры регулирования были изменены в соответствии с другими инструментами регулирования на уровне ядра. DevTools больше не показывает показатели задержки, загрузки и выгрузки рядом с каждым параметром, поскольку эти значения вводили в заблуждение. Цель состоит в том, чтобы соответствовать истинному опыту каждого варианта.

Асинхронные стеки включены по умолчанию

Флажок «Асинхронный» удален с панели «Источники» . Асинхронная трассировка стека теперь включена по умолчанию. Раньше эта опция была добровольной из-за снижения производительности. Накладные расходы теперь достаточно минимальны, чтобы включить эту функцию по умолчанию. Если вы предпочитаете отключить асинхронную трассировку стека, вы можете отключить ее в настройках или выполнив команду Do not capture async stack traces в меню команд .

DevTools на Google I/O '17

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

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

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

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

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

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

Что нового в DevTools

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