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

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

Скопировать стили элемента

Щелкните правой кнопкой мыши по узлу в DOM-дереве , чтобы скопировать CSS этого узла в буфер обмена.

Скопируйте стили.

Рисунок 1. Копирование стилей элементов.

Спасибо Адаму Аргилу и VisBug за вдохновение .

Визуализация изменений компоновки

Представьте, что вы читаете новостную статью на своем любимом сайте. Во время чтения вы постоянно теряете место, потому что контент постоянно скачет. Эта проблема называется смещением макета. Обычно это происходит, когда изображения и реклама полностью загружаются. Страница не зарезервировала место для изображений и рекламы, поэтому браузеру приходится смещать весь остальной контент вниз, чтобы освободить для них место. Решение — использовать плейсхолдеры .

Теперь инструменты разработчика могут помочь вам обнаружить смещение макета:

  1. Откройте меню команд .
  2. Начните вводить Rendering .
  3. Выполните команду «Показать рендеринг» .
  4. Включите флажок «Области смещения макета» . При взаимодействии со страницей смещения макета будут подсвечиваться синим цветом.

Изменение планировки.

Рисунок 2. Изменение компоновки.

Выпуск Chromium № 961846

Lighthouse 5.1 в панели «Аудиты»

В панели «Аудиты» теперь используется Lighthouse 5.1 . В число новых аудитов входят:

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

Рисунок 3. Новый пользовательский интерфейс панели аудита.

В версиях Lighthouse 5.1 для Node и CLI появились 3 новые важные функции, на которые стоит обратить внимание:

  • Бюджеты производительности . Предотвратите снижение производительности вашего сайта со временем, указав количество запросов и размеры файлов, которые страницы не должны превышать.
  • Плагины . Расширьте возможности Lighthouse, добавив собственные пользовательские аудиты.
  • Пакеты для проверки соответствия технологическим стекам . Добавьте проверки, адаптированные к конкретным технологическим стекам. Пакет для WordPress был выпущен первым. Пакеты для React и AMP находятся в разработке.

синхронизация тем ОС

Если вы используете темную тему вашей операционной системы, DevTools теперь автоматически переключается на свою собственную темную тему .

Сочетание клавиш для открытия редактора точек останова

Нажмите Control + Alt + B или Command + Option + B (Mac), находясь в редакторе на панели «Источники», чтобы открыть редактор точек останова . Используйте редактор точек останова для создания точек логирования и условных точек останова .

Редактор точек останова.

Рисунок 4. Редактор точек останова .

Предварительная загрузка кэша в панели «Сеть»

В столбце «Размер» панели «Сеть» теперь отображается значение (prefetch cache) , если ресурс был загружен из кэша предварительной загрузки. Предварительная загрузка — это относительно новая функция веб-платформы, предназначенная для ускорения последующей загрузки страниц. По данным Can I use... , по состоянию на июль 2019 года она поддерживается в 83,33% браузеров по всему миру.

В столбце «Размер» указано, что ресурсы были получены из кэша предварительной выборки.

Рисунок 5. В столбце «Размер» показано, что prefetch2.html и prefetch2.css были получены из (prefetch cache) .

Чтобы попробовать функцию Prefetch, посмотрите демоверсию .

Выпуск Chromium № 935267

Частная собственность при осмотре объектов

Теперь в предварительном просмотре объектов в консоли отображаются поля закрытых классов .

При проверке объекта в консоли теперь отображаются закрытые поля, такие как '#color'.

Рисунок 6. В старой версии Chrome слева поле #color не отображается при проверке объекта, тогда как в новой версии справа оно отображается.

Уведомления и push-уведомления в панели приложения.

В разделе «Фоновые службы» панели приложений теперь поддерживаются push-уведомления и оповещения. Push-уведомления отправляются, когда сервер передаёт информацию сервисному работнику. Уведомления отправляются, когда сервисный работник или скрипт страницы отображает информацию пользователю.

Как и в случае с функциями фоновой загрузки и фоновой синхронизации из Chrome 76 , после начала записи push-уведомления и сообщения на этой странице будут записываться в течение 3 дней, даже когда страница закрыта и даже когда Chrome закрыт.

Новые панели «Уведомления» и «Push-сообщения».

Рисунок 7. Новые панели «Push-сообщения» и «Уведомления» в панели приложения.

Выпуск Chromium № 927726

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

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

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

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

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

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