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

Kayce Basques

Новое в DevTools в Chrome 68:

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

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

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

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

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

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

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

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

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» .