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

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

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

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

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

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

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

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

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

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

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

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

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

Проблема с Chromium № 961846

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы опробовать Prefetch, ознакомьтесь с демонстрацией 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.

Что нового в DevTools

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