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

Джеселин Йин

Настройка сочетаний клавиш в инструментах разработчика

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

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

Настройка сочетаний клавиш в инструментах разработчика.

Проблемы с Chromium: 1335274 , 174309

Переключайте светлую и темную темы с помощью сочетания клавиш.

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

Переключайте светлую и темную темы с помощью сочетания клавиш.

Проблемы Chromium: 1280398 , 1226363

Выделение объектов C/C++ в инспекторе памяти.

Инспектор памяти подсвечивает все байты объекта памяти в C/C++.

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

Эта функция помогает отличать их от окружающей памяти. Подробнее об изменениях см. в разделе «Расширение инспектора памяти для отладки C/C++» .

Выделите объекты C/C++ в инспекторе памяти.

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

Поддержка полной информации об инициаторе для импорта HAR.

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

Информация об инициаторе помогает разработчикам отслеживать источник сетевого запроса и выявлять проблемы, связанные с сетью.

Поддерживается предоставление полной информации об инициаторе для импорта HAR.

Выпуск Chromium: 1343185

Начать поиск в DOM после нажатия клавиши Enter

Теперь вы можете отключить параметр «Поиск по мере ввода» , чтобы поиск DOM всегда начинался после нажатия клавиши Enter .

На панели «Элементы» переключайте строку поиска с помощью Control или Command + F. По мере ввода запроса в поле поиска дерево DOM будет переходить к первому совпадающему элементу и по умолчанию выделять его.

Для пользователей, особенно для тестировщиков, которые постоянно работают с длинными поисковыми запросами, такое поведение нежелательно. Дерево DOM может несколько раз перескакивать при вводе длинного поискового запроса (например, //div[@id="example"] ). Такое поведение создает ненужные перемещения.

Поиск в DOM.

Перейдите в «Настройки» > «Предпочтения» и отключите функцию «Поиск по мере ввода ». После этого поиск будет начинаться только после нажатия клавиши Enter .

Настройка поиска по мере ввода.

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

Отображение start и end значков для свойства CSS flexbox align-content

В панели «Стили» отредактируйте свойство align-content в CSS-классе с display: flex или display: inline-flex . start и end отобразятся в выпадающем списке автозаполнения с иконками.

Свойства flexbox align-content.

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

Различные важные моменты

  • Отображайте корректное количество сообщений в боковой панели консоли . Ранее счетчики не обновлялись при очистке сообщений консоли. ( 1343311 )

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

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

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

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

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

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