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

Кейси Баск
Kayce Basques

С возвращением! Вот что нового.

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

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

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

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

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

Lighthouse v4 в панели «Аудиты»

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

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

Новая система оценки значков для категории PWA.

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

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

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

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

    Панель «Сеть»

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

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

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

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

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

    Проверка соединения WebSocket

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

  4. Нажмите вкладку «Сообщения» .

    Вкладка «Сообщения»

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

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

    Анализ двоичного сообщения

    Рисунок 8. Анализ двоичного сообщения.

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

Просмотр двоичного сообщения в формате Base64

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

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

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

  1. Сфокусируйтесь на инструментах разработчика, а затем нажмите 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 ) сервисным работником.

Фильтрация по: service-worker-initiated

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

Фильтрация по is:service-worker-intercepted

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

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

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

Теперь записи выступлений позволяют отмечать выполненные длительные задачи, а также использовать First Paint.

В качестве примера использования панели «Производительность» для анализа скорости загрузки страницы ознакомьтесь со статьей «Уменьшение объема работы основного потока» .

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

Теперь записи выполнения заданий демонстрируют длительные процессы .

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

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

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

В разделе «Время» записи выступления теперь отмечается «Первая покраска».

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

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

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

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

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

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

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

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

Что нового в инструментах разработчика

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