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

Кейси Баск
Kayce Basques
X GitHub

Новое в инструментах разработчика Chrome 68:

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

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

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

Нетерпеливая оценка

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

В консоли отображается результат операции сортировки (sort()) до того, как она была явно выполнена.

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

Для включения режима предварительной оценки:

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

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

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

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

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

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

Примечания:

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

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

После включения функции «Немедленная оценка» в консоли теперь также отображается информация о доступных свойствах и функциях после ввода функции.

После выполнения 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 is not valid
  • Используйте видеоформаты для создания анимированного контента.
  • Избегайте многочисленных и дорогостоящих поездок туда и обратно в любой пункт отправления.

Поддержка BigInt

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

Пример использования типа BigInt в консоли.

Рисунок 6. Пример использования BigInt в консоли.

Добавить путь к свойству для отслеживания.

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

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

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

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

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

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

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

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

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

Что нового в инструментах разработчика

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