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

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

Kayce Basques

Новое в DevTools в Chrome 68:

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

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

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

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

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

Стремительная оценка

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

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

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

Чтобы включить Eager Evaluation:

Откройте Консоль .
Открыть настройки консоли .
Установите флажок «Стремительная оценка» .

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

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

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

Подсказки по аргументам в консоли.

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

Примечания:

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

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

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

После запуска document.querySelector('p') консоль теперь может показать вам доступные свойства и функции для этого элемента.

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

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

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

Консоль теперь предлагает «ожидание» в пользовательском интерфейсе автозаполнения.

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

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

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

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

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

Новый интерфейс

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

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

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

Новые аудиты

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

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

Поддержка BigInt

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

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

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

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

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

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

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

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

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

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

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

Связь с командой Chrome DevTools

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

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