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

Kayce Basques

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

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

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

Новые функции

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

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

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

Рисунок 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 .

Используйте параметр «Группировать по продукту» на вкладках « Дерево вызовов» и «Снизу вверх» , чтобы сгруппировать действия по записи производительности по сторонним сущностям, вызвавшим эти действия. Чтобы узнать, как анализировать производительность с помощью 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

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