Join us for web.dev LIVE, a digital event from June 30th to July 2nd to learn modern web techniques. More at web.dev/live

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

chrome68,devtools,devtools-whatsnew #}

Новое в DevTools в Chrome 68:

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

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

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

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

Упреждающее вычисление

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

The Console is
printing the result of the sort() operation before it has been
            explicitly executed.
Рисунок 1 Консоль печатает результат операции sort() до ее явного выполнения

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

  1. Откройте консоль .
  2. Откройте Настройки Консоли Console
Settings {:.inline-icon}.
  3. Включите флажок Упреждающее вычисление .

DevTools не делает упреждающего вычисления, если выражение вызывает побочные эффекты {:.external}.

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

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

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

Примечания:

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

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

Примечание. Эта функция зависит от Упреждающего вычисления, которое необходимо включить в Настройках Консоли Console
Settings {:.inline-icon}.

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

After running
document.querySelector('p'), the Console can now show you the available
            properties and functions for that element.
Рисунок 3 Верхний снимок экрана представляет старое поведение, а нижний снимок экрана представляет новое поведение, которое поддерживает автозаполнение функции.

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

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

The Console now suggests
'await' in its autocomplete UI.
Рисунок 4 Консоль теперь предлагает await в своем автозаполнении пользовательского интерфейса

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

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

Более быстрые и надежные проверки

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

Новый пользовательский интерфейс

Lighthouse 3.0 также предоставляет новый пользовательский интерфейс благодаря сотрудничеству между командами Lighthouse и Chrome UX (Research & Design).

The new report UI
in Lighthouse 3.0.
Рисунок 5 Новый интерфейс отчета в Lighthouse 3.0

Новые проверки

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

  • Первое существенное отображение (First Contentful Paint)
  • robots.txt недействителен
  • Используйте видео форматы для анимированного контента
  • Избегайте многократных дорогостоящих круговых задержек запросов (Round-Trips)

Поддержка BigInt

Примечание. По сути, это не DevTools, а новая функция JavaScript, которую вы можете попробовать в Консоли.

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

An example of BigInt in
the Console.
Рисунок 6 Пример BigInt в консоли

Добавьте путь свойства для просмотра

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

An example of Add
property path to watch.
Рисунок 7 Пример добавления пути свойства для просмотра

«Показать метки времени» перенесено в настройки

Флажок Show timestamps ранее в настройках консоли Настройки
консоли {:.inline-icon} перемещен в Настройки .

Обратная связь

Чтобы обсудить новые функции и изменения в этом посте, или что-нибудь еще, связанное с DevTools:

  • Сообщите об ошибках в Chromium Bugs {:.external}.
  • Обсудите особенности и изменения в списке рассылки {:.external}. Пожалуйста, не используйте список рассылки для вопросов поддержки. Вместо этого используйте Stack Overflow.
  • Получите помощь в использовании DevTools на Stack Overflow {:.external}. Пожалуйста, не регистрируйте ошибки на Stack Overflow. Вместо этого используйте Chromium Bugs.
  • Упомяните нас в Твиттере @ChromeDevTools .
  • Ошибки в этом документе размещайте в репозитории Web Fundamentals {:.external}.

Обратите внимание на Canary

Если вы используете Mac или Windows, рассмотрите возможность использования Chrome Canary в качестве браузера по умолчанию для разработки. Если вы сообщаете об ошибке или изменении, которое вам не нравится, пока оно находится в Canary, команда DevTools может значительно быстрее отреагировать на ваши отзывы.

Примечание: Canary - новейшая версия Chrome. Она выпущено, как только собрана, без тестирования. Это означает, что Canary ломается время от времени, примерно раз в месяц, и это обычно исправляется в течение дня. Вы можете вернуться к использованию Chrome Stable, пока Canary не работает.

-