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

Kayce Basques

Новое в DevTools в Chrome 68:

• Eager Evaluation . По мере ввода выражений консоль отображает предварительный просмотр результата.
• Подсказки аргументов . При вводе функций консоль показывает ожидаемые аргументы для этой функции.
• Автодополнение функций . После ввода вызова функции, например document.querySelector('p') , консоль покажет функции и свойства, поддерживаемые возвращаемым значением.
• Ключевые слова ES2017 в консоли . Такие ключевые слова, как await , теперь доступны в интерфейсе автодополнения консоли.
• Lighthouse 3.0 на панели «Аудиты» . Более быстрые и последовательные аудиты, новый пользовательский интерфейс и новые аудиты.
• Поддержка BigInt . Попробуйте новые целые числа произвольной точности в JavaScript в консоли.
• Добавление путей к свойствам на панель «Наблюдение» . Добавьте свойства из панели «Область» на панель «Наблюдение».
• «Показывать временные метки» перенесено в Настройки .

Читайте дальше или посмотрите видео -версию выпуска заметок ниже.

Вспомогательная консоль

Chrome 68 поставляется с несколькими новыми функциями консоли, связанными с автодополнением и предварительным просмотром.

Жадная оценка

При вводе выражения в Консоль теперь можно увидеть предварительный просмотр результата этого выражения под курсором.

Рисунок 1. Консоль выводит результат операции sort() до её явного выполнения.

Чтобы включить функцию «Эйджер-оценка»:

1. Откройте Консоль .
2. Открыть настройки консоли .
3. Включите флажок Активная оценка .

DevTools не торопится оценивать, вызывает ли выражение побочные эффекты .

Подсказки к аргументам

При вводе функций консоль теперь показывает аргументы, которые ожидает функция.

Рисунок 2. Различные примеры подсказок аргументов в консоли.

Примечания:

• Вопросительный знак перед аргументом, например ?options , представляет необязательный аргумент.
• Многоточие перед аргументом, например ...items , обозначает распространение .
• Некоторые функции, такие как CSS.supports() , принимают несколько сигнатур аргументов.

Автодополнение после выполнения функции

После включения функции Eager Evaluation консоль также показывает, какие свойства и функции доступны после ввода функции.

Рисунок 3. Верхний снимок экрана представляет старое поведение, а нижний снимок экрана — новое поведение, поддерживающее автодополнение функций.

Ключевые слова ES2017 в автозаполнении

Ключевые слова ES2017, такие как await , теперь доступны в пользовательском интерфейсе автозаполнения консоли.

Рисунок 4. Консоль теперь предлагает await в своем интерфейсе автозаполнения.

Более быстрые и надежные аудиты, новый пользовательский интерфейс и новые аудиты

Chrome 68 поставляется с Lighthouse 3.0. В следующих разделах представлен обзор некоторых наиболее важных изменений. Подробнее см. в статье «Анонс Lighthouse 3.0» .

Более быстрые и надежные аудиты

Lighthouse 3.0 оснащен новым внутренним механизмом аудита под кодовым названием Lantern, который ускоряет проведение аудита и уменьшает расхождения между запусками.

Новый пользовательский интерфейс

Lighthouse 3.0 также предлагает новый пользовательский интерфейс, созданный благодаря сотрудничеству команд Lighthouse и Chrome UX (исследования и дизайн).

Рисунок 5. Новый интерфейс отчёта в Lighthouse 3.0

Новые аудиты

Lighthouse 3.0 также поставляется с 4 новыми аудитами:

• Первая содержательная краска
• robots.txt недействителен
• Используйте видеоформаты для анимированного контента
• Избегайте многократных дорогостоящих поездок туда и обратно в любой пункт назначения

Поддержка BigInt

Chrome 68 поддерживает новый числовой примитив BigInt . BigInt позволяет представлять целые числа с произвольной точностью. Попробуйте в консоли:

Рисунок 6. Пример BigInt в консоли.

Добавить путь к свойству для просмотра

Во время паузы в точке останова щелкните правой кнопкой мыши свойство на панели «Область» и выберите Добавить путь к свойству для наблюдения , чтобы добавить это свойство на панель «Наблюдение».

Рисунок 7. Пример добавления пути к отслеживаемому свойству

«Показывать временные метки» перенесено в настройки.

Флажок « Показывать временные метки» ранее был в настройках консоли. перемещено в Настройки .

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

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

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

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

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

Что нового в DevTools

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