Что нового в 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 добавил две новые эмуляции на вкладке Rendering, что позволяет отключать форматы изображений 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 на панели «Производительность», чтобы просмотреть новую полосу Web Vitals.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выберите открытое окно в дереве Frames, чтобы просмотреть сведения об окне. Щелкните ссылку Opener Frame, чтобы открыть Opener на панели Elements.

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

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

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

Перейдите в Application > Service Workers , щелкните Network requests of a SW. Панель Network открывается в нижней панели, отображая все запросы, связанные с service worker (сетевые запросы фильтруются по "is:service-worker-intercepted" ).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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