вперед отblog.vvvvvvvvvvvvvvvv.com/2018/05/28/…
Зависит отОфициальная статья ChromeДля перевода рекомендуется просматривать исходный английский текст.Как программист, чтение официальных документов должно быть необходимым навыком (поскольку перевод содержит мысли переводчика, он может быть не в состоянии точно выразить мысль, которую исходный текст хочет передать Экспресс). Может получить эти «Основные данные», также является обязательным навыком
Notes:Видео-версия этих заметок выпуска будет выпущена примерно в конце июля 2018 года
Новые инструменты разработчика Chrome 68:
- Нетерпеливая оценка Когда вы вводите выражение, консоль предварительно просматривает результат.
- Подсказки аргументов Когда вы вводите функцию, консоль покажет вам аргументы, ожидаемые функцией.
- Автодополнение функции.После ввода вызова функции, например
document.querySelector('p'), консоль покажет вам поддерживаемые функции и свойства для возвращаемых значений. - Ключевые слова ES2017 в консоли (ключевые слова консоли ES2017). Ключевые слова, такие как
await, теперь поддерживает автодополнение в консоли. - Lighthouse 3.0 на панели «Аудит»: более быстрые и последовательные аудиты, новый пользовательский интерфейс и новые инструменты аудита.
-
BigIntподдержка (поддержка BigInt). Попробуйте новое целое число произвольной точности JavaScript в консоли. - Добавление путей к свойствам на панель просмотра
- «Показать временные метки» перемещено в «Настройки» («Показать временные метки» перемещено в «Настройки»).
Notes:бегатьchrome://versionчтобы проверить свою версию Chrome. Если вы используете предыдущую версию, этих функций не будет. Если вы используете более позднюю версию (Примечание переводчика: новее, чем текущая версия), эти функции могут быть изменены. Chrome примерно автоматически обновляется на новую основную версию каждые 6 недель.
Консоль специальных возможностей
В Chrome 68 добавлены некоторые новые функции консоли для автозаполнения и предварительного просмотра.
Нетерпеливая оценка
Когда вы вводите выражение в консоль, консоль теперь может отображать предварительный просмотр выражения под вашим указателем.
Рис. 1. Напечатано перед явным выполнением в консолиsort()результат операции.
Включите нетерпеливую оценку:
- Открытьприставка
- Открытьнастройки консоли
- ОткрытьEager evaluationфлажок
если выражение имеетпобочный эффект, инструменты разработчика сразу не оцениваются
Подсказки аргументов
Но когда вы вводите вызов функции, консоль теперь показывает аргументы, ожидаемые функцией.
Рисунок 2: Несколько примеров подсказок параметров консоли
Notes:
- знак вопроса перед параметром, например.
?options, а это значит, что этонеобязательныйпараметр. - многоточие перед параметром, например.
...items, а это значит, что этоspreadпараметр типа. - некоторые функции, такие как
CSS.supports(), который принимает несколько подписей параметров.
Автодополнение после выполнения функции
Примечания: эта функция зависит от Eager Evaluation, которую необходимо включить в настройках консоли.
После открытия Eager Evaluation консоль также отобразит вам после вызова функции ее допустимые свойства и функции.
Рисунок 3: На снимке экрана выше показано старое поведение, на снимке экрана ниже показано завершение функции поддержки нового поведения
Ключевые слова ES2017 в автозаполнении (дополнение ключевых слов ES2017)
Ключевые слова ES2017, такие какawait, теперь поддерживает автодополнение в консоли
Рисунок 4. Консоль теперь предлагает автозаполнение пользовательского интерфейсаawait
Более быстрые и надежные аудиты, новый пользовательский интерфейс и новые аудиты
Chrome 68 представляет Lighthouse 3.0, в следующем абзаце собраны некоторые из больших изменений, см. также все изменения.Announcing Lighthouse 3.0
Быстрее, более последовательный обзор
Lighthouse 3.0 имеет новый механизм внутреннего обзора под кодовым названием Lantern, который быстрее завершает ваши обзоры и имеет меньше отклонений во время выполнения.
новый интерфейс
Lighthouse 3.0 также предлагает новый пользовательский интерфейс благодаря сотрудничеству между командами Lighthouse и Chrome UX (исследования и дизайн).
Рисунок 5: Новый пользовательский интерфейс отчетов Lighthouse 3.0
новый инструмент обзора
Lighthouse 3.0 также содержит 4 новых инструмента обзора:
- First Contentful Paint
- robots.txt недействителен
- Используйте форматы видео для анимированного контента
- Избегайте многочисленных дорогостоящих поездок туда и обратно в любой пункт отправления
Поддержка BigInt (поддержка BigInt)
Примечание. Это не функция инструментов разработчика, а новая возможность JavaScript, которую можно использовать в консоли.
Chrome 68 поддерживает новый тип числового примитива, который называетсяBigInt, BigIntПозволяет объявить целое число произвольной точности. Попробуйте в консоли:
Рис. 6. Один в консолиBigIntпример
Добавить путь к свойству для просмотра (добавить путь к свойству для просмотра)
Во время паузы в точке останова щелкните правой кнопкой мыши свойство на панели «Область» и выберитеAdd property path to watchчтобы добавить это свойство на панель Watch.
Рисунок 7:Add property path to watchпример
Благодаря PhistucK
«Показать временные метки» перемещено в настройки («Показать временные метки» перемещено в настройки)
был вConsole SettingsсерединаShow timestampsфлажок перемещен вSettings.
Рассмотрим канарейку
Если вы используете Mac или Windows, рассмотрите возможность использованияChrome CanaryВ качестве браузера для разработки по умолчанию. Если вы сообщите об ошибке или изменении, которое вам не нравится, но все еще существует в Canary, команда DevTools может значительно быстрее обработать ваш отзыв.
Примечание. Canary — это последняя версия Chrome, которая выпускается сразу после сборки, а не тестируется. Это означает, что Canary время от времени дает сбой, примерно раз в месяц, и обычно это устраняется в течение дня. Продолжайте использовать Chrome. Стабильная (стабильная версия Chrome).