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

Кейси Баски

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

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

Копирование стилей.

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

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

Визуализируйте изменения макета

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

DevTools теперь может помочь вам обнаружить смещение макета:

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

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

Рисунок 2. Изменение макета.

Проблема с хромом № 961846.

Маяк 5.1 на панели «Аудит»

На панели «Аудит» теперь работает Lighthouse 5.1 . Новые проверки включают в себя:

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

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

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

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

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

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

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

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

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

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

Кэш предварительной выборки на панели «Сеть»

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

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

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

Посмотрите демо-версию предварительной выборки , чтобы опробовать ее.

Проблема с хромом № 935267.

Частные свойства при просмотре объектов

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

При проверке объекта консоль теперь отображает частные поля, такие как «#color».

Рисунок 6. Старая версия Chrome слева не отображает поле #color при проверке объекта, а новая версия справа — показывает.

Уведомления и push-сообщения в панели приложений

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

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

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

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

Проблема с хромом № 927726.

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

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

Связь с командой Chrome DevTools

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

Что нового в DevTools

Список всего, что было описано в серии «Что нового в DevTools» .