Что нового в 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 .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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