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

Kayce Basques

Добро пожаловать обратно! Вот что нового.

Видеоверсия этой страницы

Выделить все узлы, затронутые свойством CSS

Наведите указатель мыши на свойство CSS, которое влияет на модель блока узла, например padding или margin , чтобы выделить все узлы, затронутые этим объявлением.

Рисунок 1. При наведении курсора на свойство margin выделяются поля всех узлов, затронутых этим объявлением.

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

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

Категория PWA в отчете теперь использует систему оценок с помощью значков.

Рисунок 3. Новая система подсчета очков для категории PWA

Просмотрщик двоичных сообщений WebSocket

Чтобы просмотреть содержимое двоичного сообщения WebSocket:

1. Откройте панель «Сеть» . См. раздел «Проверка сетевой активности» , чтобы узнать основы анализа сетевой активности.

   

   Рисунок 4. Панель «Сеть»

2. Нажмите WS , чтобы отфильтровать все ресурсы, которые не являются соединениями WebSocket.

   

   Рисунок 5. После нажатия WS отображаются только соединения WebSockety

3. Щелкните имя соединения WebSocket, чтобы проверить его.

   

   Рисунок 6. Проверка соединения WebSocket

4. Откройте вкладку «Сообщения» .

   

   Рисунок 7. Вкладка «Сообщения»

5. Щелкните одну из записей двоичного сообщения , чтобы просмотреть ее.

   

   Рисунок 8. Проверка двоичного сообщения

Используйте выпадающее меню в нижней части просмотрщика, чтобы преобразовать сообщение в Base64 или UTF-8. Нажмите Копировать в буфер обмена чтобы скопировать двоичное сообщение в буфер обмена.

Рисунок 9. Просмотр двоичного сообщения в формате Base64

Сделать снимок экрана области в меню команд

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

1. Перейдите к DevTools, а затем нажмите Control + Shift + P или Command + Shift + P (Mac), чтобы открыть меню команд.

   

   Рисунок 10. Меню команд

2. Начните вводить area , выберите Сделать снимки экрана области , затем нажмите Enter .

3. Перетащите указатель мыши на ту часть области просмотра, снимок экрана которой вы хотите сделать.

   

   Рисунок 11. Выбор части области просмотра для скриншота

Фильтры Service Worker на панели «Сеть»

Введите is:service-worker-initiated или is:service-worker-intercepted в текстовом поле фильтра панели «Сеть», чтобы просмотреть запросы, которые были вызваны ( initiated ) или потенциально изменены ( intercepted ) работником службы.

Рисунок 12. Фильтрация по is:service-worker-initiated

Рисунок 13. Фильтрация по is:service-worker-intercepted

Дополнительную информацию о фильтрации сетевых журналов см. в разделе Фильтрация ресурсов .

Обновления панели производительности

Записи исполнения теперь размечают длительные задачи и первую покраску.

Ознакомьтесь с разделом Сокращение нагрузки на основной поток, чтобы ознакомиться с примером использования панели «Производительность» для анализа производительности загрузки страницы.

Длинные задачи в записях выступлений

Записи производительности теперь показывают длительные задачи .

Рисунок 14. Наведение курсора на длительную задачу в записи производительности

Первая краска в разделе «Время»

Раздел «Хронометраж» записи выступления теперь отмечает первую покраску.

Рисунок 15. Первая краска в разделе «Время»

Новый учебник DOM

Ознакомьтесь с разделом Начало работы с просмотром и изменением DOM, чтобы получить практическое представление о функциях, связанных с DOM.

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

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

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

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

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

Что нового в DevTools

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