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

Кейс Баскс

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

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

Копировать стили.

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

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

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

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

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

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

Изменение макета.

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

Проблема с хромом #961846

Lighthouse 5.1 на панели аудита

Панель аудита теперь работает под управлением Lighthouse 5.1 . Новые аудиты включают:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проблема с хромом #935267

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

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

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

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

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

Раздел Background Services панели Application теперь поддерживает Push-сообщения и уведомления. Push-сообщения возникают, когда сервер отправляет информацию Service Worker. Уведомления возникают, когда Service Worker или скрипт страницы показывает информацию пользователю.

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

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

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

Проблема с хромом #927726

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

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

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

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

Что нового в DevTools

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