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

Кейс Баскс

Новичок в Devtools в Chrome 68:

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

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

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

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

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

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

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

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

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

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

Аргументы-подсказки

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

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

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

Примечания:

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

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

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

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

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

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

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

Теперь в интерфейсе автозаполнения консоли предлагается «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» .