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

Jecelyn Yeen

Более быстрый запуск DevTools

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

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

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

Проблема с хромом: 1029427

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

DevTools теперь имеет улучшенную поддержку отладки 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 . Текущее изображение src ( currentSrc ) теперь является резервным изображением WebP.

Проблема с хромом: 1130556

Моделировать размер квоты хранилища на панели «Хранилище»

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

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

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

Новая полоса Web Vitals в записях панели Performance

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

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

В настоящее время на полосе отображаются такие показатели Web Vitals, как первая отрисовка контента (FCP), самая большая отрисовка контента (LCP) и смещение макета (LS).

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

Проблема с хромом: нет данных

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

DevTools теперь отображает ошибку CORS при сбое сетевого запроса из-за Cross-origin Resource Sharing (CORS).

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

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

Проблема с хромом: 1141824

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

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

Изолированный статус кросс-источника теперь отображается в разделе «Безопасность и изоляция» .

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

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

Проблема с хромом: 1139899

Новая информация о Web Workers в представлении сведений о фрейме

DevTools теперь отображает выделенные веб-воркеры под фреймом, который их создает.

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

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

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

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

Выберите открытое окно в дереве «Фреймы» , чтобы просмотреть сведения об окне. Щелкните ссылку «Фрейм-открыватель» , чтобы открыть его на панели «Элементы».

Проблема с хромом: 1107766

Открыть панель «Сеть» из панели «Service Workers»

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

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

Проблема с хромом: нет данных

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

Копировать стоимость недвижимости

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

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

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

Проблема с хромом: 1132084

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

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

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

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

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

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

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

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

Оценка переменной Wasm в консоли

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

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

Проблема с хромом: 1127914

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

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

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

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

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

Проблема с хромом: 1143833

Экспериментальные возможности

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

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

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

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

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

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

• flex-direction
• direction
• writing-mode

Эти значки помогут вам лучше визуализировать Flexbox-макет страницы.

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

Попробуйте и дайте нам знать, что вы думаете!

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

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

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

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

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

Проблема с хромом: 174309

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

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

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

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

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

Что нового в DevTools

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