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

Кейси Баски

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

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

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

Новая панель аудитов на базе 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.

Что нового в DevTools

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