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

Kayce Basques

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

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

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

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

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

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

Оценки в верхней части для Progressive Web App , Performance , Accessibility и Best Practices являются вашими совокупными оценками по каждой из этих категорий. Остальная часть отчета представляет собой разбивку каждого из тестов, которые определили ваши оценки. Улучшите качество вашей веб-страницы, исправив не пройденные тесты.

Рисунок 1. Отчет Lighthouse

Для аудита страницы:

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

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

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

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

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

Есть идея для аудита Lighthouse? Опубликуйте ее здесь!

Значки третьих лиц

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

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

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

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

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

Используйте опцию Group by product на вкладках Call Tree и Bottom-Up для группировки действий по записи производительности по сторонним сущностям, вызвавшим действия. См. Get Started With Analyzing Runtime Performance , чтобы узнать, как анализировать производительность с помощью DevTools.

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

Новый жест для «Продолжить здесь»

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

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

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

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

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

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

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

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

Изменения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DevTools на Google I/O '17

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

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

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

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

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

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

Что нового в DevTools

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