Новинки DevTools (Chrome 107)

Published on

Translated to: English, Español, Português, 한국어, 中文, 日本語

Переводы предоставлены Alena Batitskaia. Редактор — Maxim Salnikov.

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

Кастомизация сочетаний клавиш в DevTools

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

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

Кастомизация сочетаний клавиш в DevTools

Задачи в трекере Chromium: 1335274, 174309

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

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

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

Задачи в трекере Chromium: 1280398, 1226363

Подсветка объектов C/C++ в Инспекторе памяти (Memory Inspector)

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

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

Эта функция поможет вам отличить их от окружающей памяти. Читайте Extending the Memory Inspector for C/C++ debugging, чтобы узнать о других изменениях.

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

Задача в трекере Chromium: 1336568

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

Полная информация об Инициаторе (Initiator) теперь доступна для импорта HAR. Ранее во вкладке Сеть (Network) показывалась только частичная информация об инициаторе при импорте.

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

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

Задача в трекере Chromium: 1343185

Начало поиска по DOM по нажатию по Enter

Теперь вы можете отключить настройку Поиск при вводе запроса (Search as you type), чтобы всегда начинать поиск по DOM только после нажатия на Enter.

Вызовите строку поиска во вкладке Элементы (Elements) при помощи Control или Command + F.

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

Поиск по DOM

Перейдите в Настройки (Settings) > Параметры (Preferences) и отключите Поиск при вводе запроса (Search as you type). После этих изменений поиск будет происходить только после того, как вы нажмёте на Enter.

Настройка Поиск при вводе запроса

Задача в трекере Chromium: 1344526

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

Во вкладке Стили (Styles) отредактируйте свойство align-content у элемента с display: flex или display: inline-flex. Значения start и end будут отображаться с иконками в выпадающем меню автодополнения.

Свойство флексбокса align-content

Задача в трекере Chromium: 1139945

Другие важные моменты

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

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

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

Связь с командой Chrome DevTools

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

  • Отправьте нам предложение или отзыв через crbug.com.
  • Сообщите о проблеме, связанной с DevTools, используя Больше опций (More options)   More   > Справка (Help) > Сообщить о проблемах в инструментах разработчика (Report a DevTools issues) в DevTools.
  • Твитните на @ChromeDevTools.
  • Оставьте комментарии под What's new in DevTools видео на YouTube.

Больше новинок DevTools

Чтобы увидеть полный список обновлений, перейдите на английскую версию по ссылке What's New In DevTools. Ниже перечислены материалы, переведенные на русский язык.

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.