Эта страница переведена с помощью Cloud Translation API.

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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 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) .

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

Проблема с хромом № 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.

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