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

Джеселин Йен

Ускоренный запуск DevTools

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

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

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

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

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

DevTools теперь имеет улучшенную поддержку отладки углов CSS!

Угол CSS

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

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

Проблемы с хромом: 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 . Источник текущего изображения ( currentSrc ) теперь является резервным изображением WebP.

Эмулировать типы изображений

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

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

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

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

Имитировать размер квоты хранилища

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

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

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

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

В настоящее время на этой полосе отображается информация о веб-показателях, такая как первая отрисовка контента (FCP), наибольшая отрисовка контента (LCP) и сдвиг макета (LS).

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

Переулок Web Vitals

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

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

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

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

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

Ошибки CORS

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

Подробности о раме, просмотр обновлений

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

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

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

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

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

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

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

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

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

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

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

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

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

Выберите открытое окно в дереве фреймов , чтобы просмотреть подробную информацию об окне. Нажмите на ссылку «Открывающая рамка» , чтобы открыть открывающую часть на панели «Элементы».

Детали открывающейся рамы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Согласованные единицы измерения размеров файлов/памяти.

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

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

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

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

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

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

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

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

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

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

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

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

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

  • flex-direction
  • direction
  • writing-mode

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

Отладка CSS Flex

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

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

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

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

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

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

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

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

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

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

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

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

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

Что нового в DevTools

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