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

Новое в DevTools в Chrome 68:

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

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

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

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

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

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

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

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

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

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.

Что нового в DevTools

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