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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

• Предоставляет допустимый apple-touch-icon . Проверяет возможность добавления PWA на домашний экран iOS.
• Поддерживайте низкое количество запросов и размеры файлов . Сообщает общее количество сетевых запросов и размеры файлов для различных категорий, таких как документы, скрипты, таблицы стилей, изображения и т. д.
• Максимальная потенциальная задержка первого ввода . Измеряет максимальное потенциальное время между первым взаимодействием пользователя со страницей и реакцией браузера на это взаимодействие. Обратите внимание, что эта метрика заменяет метрику «Расчетная задержка ввода». Максимальная потенциальная задержка первого ввода не учитывается при оценке категории «Производительность».

Рисунок 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

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

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

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

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

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

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

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

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

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

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

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

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

• Отправляйте отзывы и предложения по функциям нам на crbug.com .
• Сообщить о проблеме с DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме с DevTools в DevTools.
• Напишите твит в @ChromeDevTools .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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