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

Джеселин Йин

Быстрый старт с использованием DevTools

Теперь запуск DevTools стал примерно на 37% быстрее с точки зрения компиляции JavaScript (с 6,9 с до 5 с)! 🎉

Команда провела ряд оптимизаций для снижения накладных расходов на сериализацию, анализ и десериализацию во время запуска.

Вскоре в блоге инженеров появится статья с подробным описанием реализации. Следите за обновлениями!

Номер выпуска Chromium: 1029427

Новые инструменты визуализации углов CSS

В инструментах разработчика теперь улучшена поддержка отладки углов CSS!

CSS угол

Когда к HTML-элементу на вашей странице применяется CSS-угол наклона (например background: linear-gradient(angle, color-stop1, color-stop2) , transform: rotate(angle) ), рядом с углом в панели «Стили» отображается значок часов. Щелкните значок часов, чтобы включить или выключить отображение часов. Щелкните в любом месте на часах или перетащите стрелку, чтобы изменить угол наклона!

Для изменения значения угла также доступны сочетания клавиш мыши и клавиатуры. Подробнее об этом читайте в нашей документации !

Проблемы Chromium: 1126178 , 1138633

Эмуляция неподдерживаемых типов изображений

В DevTools на вкладке «Рендеринг» добавлены две новые эмуляции, позволяющие отключать форматы изображений AVIF и WebP. Эти новые эмуляции упрощают разработчикам тестирование различных сценариев загрузки изображений без необходимости переключения между браузерами.

Предположим, у нас есть следующий HTML-код для отображения изображения в форматах AVIF и WebP для новых браузеров, а также резервного изображения в формате PNG для старых браузеров.

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.png" alt="A test image">
</picture>

Откройте вкладку «Рендеринг» , выберите «Отключить формат изображения AVIF» и обновите страницу. Наведите курсор на img src . Текущий image src ( currentSrc ) теперь будет резервным изображением WebP.

Имитация типов изображений

Проблема Chromium: 1130556

Имитируйте размер квоты хранения на панели «Хранилище».

Теперь вы можете переопределять размер квоты хранилища на панели «Хранилище». Эта функция позволяет имитировать работу различных устройств и тестировать поведение ваших приложений в условиях низкой доступности диска.

Перейдите в раздел «Приложения» > «Хранилище» , установите флажок « Имитировать пользовательскую квоту хранилища» и введите любое допустимое число для имитации квоты хранилища.

Имитация размера квоты хранения

Проблемы с Chromium: 945786 , 1146985

В панели «Производительность» появилась новая дорожка «Web Vitals»

В записях выступлений теперь есть возможность отображения информации Web Vitals.

После записи показателей загрузки установите флажок «Web Vitals» на панели «Производительность», чтобы просмотреть новую строку «Web Vitals».

В настоящее время на экране отображается информация Web Vitals, такая как First Contentful Paint (FCP), Largest Contentful Paint (LCP) и Layout Shift (LS).

Посетите web.dev/vitals , чтобы узнать больше о том, как оптимизировать пользовательский опыт с помощью метрик Web Vitals.

Web Vitals lane

Проблема с хромом: отсутствует

Сообщайте об ошибках CORS в панели «Сеть».

В инструментах разработчика теперь отображается ошибка CORS, когда сетевой запрос завершается с ошибкой из-за совместного использования ресурсов между источниками (CORS).

На панели «Сеть» обратите внимание на неудачный сетевой запрос CORS. В столбце «Статус» отображается «Ошибка CORS» . Наведите курсор на ошибку, и во всплывающей подсказке отобразится код ошибки. Ранее в инструментах разработчика для ошибок CORS отображался только общий статус «(неудачно)» .

Это закладывает основу для наших следующих усовершенствований, направленных на предоставление более подробного описания проблем CORS!

Ошибки CORS

Номер выпуска Chromium: 1141824

Обновления отображения подробной информации о кадре

Информация о междоменной изоляции в представлении сведений о кадре.

Статус междоменной изоляции теперь отображается в разделе «Безопасность и изоляция» .

В новом разделе «Доступность API» отображается информация о доступности SharedArrayBuffer (SAB) и о возможности их совместного использования с помощью postMessage() .

Предупреждение об устаревании появится, если SharedArrayBuffers и postMessage() в данный момент доступны, но контекст не изолирован от других источников. Подробнее о изоляции от других источников и о том, почему она необходима для таких функций, как SharedArrayBuffers можно узнать в этой статье .

Информация о междоменных источниках

Номер выпуска Chromium: 1139899

Информация о новых веб-воркерах отображается в подробном представлении фрейма.

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

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

Информация о веб-работниках

Проблемы Chromium: 1122507 , 1051466

Отображение сведений о рамке открывающегося окна.

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

Выберите открытое окно в дереве «Рамки» , чтобы просмотреть подробную информацию об окне. Щелкните ссылку « Рамка открывающего окна» , чтобы отобразить открывающее окно на панели «Элементы».

Детали рамы открывателя

Проблема Chromium: 1107766

Откройте панель «Сеть» из панели «Сервисные работники».

Просматривайте всю информацию о маршрутизации запросов сервисных работников (SW) с помощью новой ссылки «Сетевые запросы» . Это предоставляет разработчикам дополнительный контекст при отладке SW.

Перейдите в раздел «Приложения» > «Сервисные работники» , щелкните по сетевым запросам сервисного работника. В нижней панели откроется панель «Сеть », отображающая все запросы, связанные с сервисными работниками (сетевые запросы фильтруются по критерию «is:service-worker-intercepted» ).

Панель «Открыть сеть» от работников сферы услуг.

Проблема с хромом: отсутствует

Новые параметры копирования на панели «Сеть».

Скопировать значение свойства

Новая опция «Копировать значение» в контекстном меню позволяет скопировать значение свойства сетевого запроса.

Скопировать значение свойства

В панели «Сеть» щелкните сетевой запрос, чтобы открыть панель «Заголовки» . Щелкните правой кнопкой мыши одно из свойств в следующих разделах: Полезная нагрузка запроса (JSON), Данные формы, Строка запроса, Параметры, Заголовки запроса, Заголовки ответа.

Затем вы можете выбрать «Копировать значение» , чтобы скопировать значение свойства в буфер обмена.

Проблема Chromium: 1132084

Скопировать трассировку стека для сетевого инициатора

Щелкните правой кнопкой мыши сетевой запрос, затем выберите «Скопировать трассировку стека» , чтобы скопировать трассировку стека в буфер обмена.

Скопировать трассировку стека

Проблема с Chromium: 1139615

Обновления отладки Wasm

Предварительный просмотр значения переменной Wasm при наведении курсора мыши

При наведении курсора на переменную в дизассемблированном коде WebAssembly (Wasm) во время паузы на точке останова, в инструментах разработчика теперь отображается текущее значение переменной.

В панели «Источники» откройте файл Wasm, установите точку останова и обновите страницу. Наведите курсор на переменную, чтобы увидеть её значение.

Предварительный просмотр переменной Wasm при наведении курсора мыши

Проблемы Chromium: 1058836 , 1071432

Оцените переменную Wasm в консоли.

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

В этом примере мы установили точку останова на строке local.get $input . При отладке ввод $input в консоли вернет текущее значение переменной, которое в данном случае равно 4 .

Оцените переменную Wasm в консоли.

Номер выпуска Chromium: 1127914

Единые единицы измерения для размеров файлов/памяти

В инструментах разработчика теперь для отображения размеров файлов/памяти используется единообразный формат — килобайты (кБ). Ранее инструменты разработчика использовали как килобайты (1000 байт), так и килобазы (1024 байта). Например, на панели «Сеть» раньше использовались обозначения «кБ», но вычисления производились в килобазах, что вызывало ненужную путаницу.

Проблема с Chromium: 1035309

Выделите псевдоэлементы на панели «Элементы».

В инструментах разработчика увеличен цветовой контраст псевдоэлементов, чтобы вам было легче их распознать.

Выделить псевдоэлементы

Номер выпуска Chromium: 1143833

Экспериментальные особенности

Инструменты отладки CSS Flexbox

Инструменты отладки Flexbox скоро появятся!

Для начала, в инструментах разработчика теперь на панели «Элементы» отображается значок flex для элементов, к которым применено display: flex .

Кроме того, в следующие свойства flexbox добавлены новые значки выравнивания:

  • flex-direction
  • align-items
  • align-content
  • align-self
  • justify-items
  • justify-content

Кроме того, эти значки зависят от контекста. Направление значка будет корректироваться в зависимости от:

  • flex-direction
  • direction
  • writing-mode

Эти значки призваны помочь вам лучше визуализировать структуру страницы, созданную с помощью flexbox.

Отладка CSS Flex

Здесь представлен проектный документ с описанием функций инструментария Flexbox. Вскоре будут добавлены и другие функции.

Попробуйте и поделитесь своим мнением!

Проблемы Chromium: 1144090 , 1139945

Настройка сочетаний клавиш для аккордов

В инструментах разработчика с момента последнего обновления добавлена ​​экспериментальная поддержка настраиваемых сочетаний клавиш .

Теперь вы можете создавать сочетания клавиш (также известные как многоклавишные комбинации) в редакторе сочетаний клавиш.

Перейдите в «Настройки» > «Сочетания клавиш» , наведите курсор на нужный элемент и нажмите кнопку «Изменить » (значок пера), чтобы настроить сочетание клавиш для аккордов.

сочетания клавиш для аккордов

Выпуск Chromium: 174309

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

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

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

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

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

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