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

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

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

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

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

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

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

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

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

В категории отчета 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. Выделите 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 ) сервисным работником.

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

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

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

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

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

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

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

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

Длинные задачи в записях исполнения

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

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

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

Первая отрисовка в разделе «Тайминги»

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

Первая отрисовка в разделе «Тайминги»

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

Новое руководство по DOM

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

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

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

Связь с командой Chrome DevTools

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

Что нового в DevTools

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