[Перевод] Что нового в DevTools в Chrome версии 68

В консоли разработчика последней версии Хрома появились такие классные фишки, что мне захотелось перевести пост на эту тему из официального блога разрабов.

Консоль разработчика в Chrome давно поражает меня глубиной своей проработки. Когда-то давно я тащился от Firebug’а, а теперь настали дни, когда я жизний своей не вижу без разработки на хроме. Хорошо, когда люди стремятся превзойти друг друга в делах.


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

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

Прочитайте или посмотрите видео-версию данных заметок:



Консоль-помощник

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


Упреждающее исполнение

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

973290f0871e432cce39ec9e9b2dca6e.png

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

Для того чтобы активировать упреждающее исполнение:


  1. Откройте Консоль
  2. Откройте её настройки (Console Settings)
  3. Поставьте галочку на параметре Eager evaluation

Инструменты разработчика не выполняют те выражения, которые могут привести к побочным эффектам.


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

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

329b219968a48b13fea728a9e9f716f6.png

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

Примечания:


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


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

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

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

c5146444f2eb79b9d9c254e38b3b967f.png

Изображение 3. Первый скриншот показывает старое поведение, а второй демонстрирует новое, которое поддерживает автозавершение.


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

Такие ключевые слова как await отныне доступни в Консоли в интерфейсе автодополнения.

7a3e6f7e36e384ca997d7ff2ce77e4c0.png

Изображение 4. Консоль отныне предлагает await в своём интерфейсе автодополнения.


Быстрые, более надёжные аудиты, новый интерфейс и новые типы аудитов

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


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

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


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

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

17687c430405235356bb409d9128a3a7.png

Изображение 5. Новый интерфейс отчёта в Lighthouse 3.0.


Новые типы аудитов

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


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


Поддержка BigInt

Примечание: это не совсем новая возможность Инструментов Разработчика, это новая возможность языка JavaScript, которую вы можете опробовать в Консоли.

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

a22f76c5bb448ec8a6ea6e98d434db15.png

Изображение 6. пример использования BigInt в Консоли.


Добавляем пути к свойству в панели наблюдения

Когда мы остановили выполнение кода на точке остановки, нажмите правой кнопкой мыши на свойстве в панели целей и выберите пункт Add property path to watch, чтобы добавить свойство на панель наблюдения.

f497c2422332a5445b2c5245c28f563f.png

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


Опция «Показать метки времени» переместилась в раздел настроек

Теперь опция Show timestamps, которая ранее находилась в настройках консоли, переместилась в настройки инструментов разработчика.

© Habrahabr.ru