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

Джеселин Йен

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Поиск DOM.

Перейдите в Настройки > Настройки , отключите Поиск по мере ввода . Благодаря этому изменению поиск начнется только после нажатия Enter .

Поиск по мере ввода настроек.

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

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

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

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

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

Разные моменты

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

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

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

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

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

Что нового в DevTools

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