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

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

Kayce Basques

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

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

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

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

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

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

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

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

Отчет Маяка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Откройте командное меню .
Запустите команду 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, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
Напишите в Твиттере @ChromeDevTools .
Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube » или «Советы по DevTools» на YouTube .