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

Published on Updated on

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

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

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

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

В DevTools добавлен простой и удобный способ изменения единиц измерения длины в CSS!

В панели Стили (Styles) найдите любое свойство с единицей измерения длины (например, height, padding).

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

Наведите мышку на числовое значение, и ваш курсор изменится на горизонтальные стрелки. Перетащите курсор горизонтально, чтобы увеличить или уменьшить числовое значение. Чтобы изменить значение десятками, зажмите клавишу Shift при перетаскивании.

Вы по-прежнему можете менять значение как текст — просто нажмите на значение и начните редактирование.

Задачи в трекере Chromium: 1126178, 1172993

Скрытие задач во вкладке Проблемы (Issues)

Теперь вы можете скрыть определенные проблемы во вкладке Проблемы (Issues), чтобы сосредоточиться только на важных для вас проблемах.

Во вкладке Проблемы (Issues) наведите курсор на проблему, которую вы хотите скрыть. Кликните на Больше опций (More options)   Троеточие, меню Больше опций (More options)   > Скрыть такие проблемы (Hide issues like this).

Меню hide issues

Все скрытые проблемы будут добавлены в панель Скрытые проблемы (Hidden issues). Разверните панель. Вы можете сделать вновь видимыми все скрытые проблемы или только выбранную.

Панель скрытых проблем

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

Улучшенное отображение свойств

В DevTools улучшено отображение свойств:

  • Собственные свойства всегда выделены жирным шрифтом и находятся вверху списка во вкладках Консоль (Console), Источники (Sources) и в панели Свойства (Properties).
  • Свойства отображаются в плоском виде в панели Свойства (Properties).

Например, сниппет ниже создаёт новый объект URL с именем link с двумя собственными свойствами: user и access, и обновляет значение наследуемого свойства search.

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

Попробуйте вывести link в Консоль (Console). Собственные свойства отображаются вверху списка и выделены жирным. Эти изменения облегчают поиск кастомных свойств, особенно для Web APIs (например, URL) с множеством унаследованных свойств.

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

Кроме этих изменений, свойства в панели Свойства (Properties) теперь тоже выводятся в плоской структуре для улучшения отладки свойств DOM, особенно для веб-компонентов.

Плоская структура свойств

Задачи в трекере Chromium: 1076820, 1119900

Lighthouse 8.4 во вкладке Lighthouse

Во вкладке Lighthouse теперь запускается Lighthouse 8.4. Lighthouse теперь определяет, является ли Largest Containful Paint (LCP) изображением с отложенной загрузкой, и показывает рекомендацию удалить атрибут loading.

Ознакомьтесь с What’s new in Lighthouse 8.4, чтобы больше узнать об обновлении.

Уведомление о ленивой загрузке LCP в отчёте Lighthouse

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

Сортировка снипетов во вкладке Источники (Sources)

Сниппеты в панели Фрагменты (Snippets) на вкладке Источники (Sources) теперь отсортированы в алфавитном порядке. Раньше они не сортировались.

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

Сортировка сниппетов на панели Источники

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

Новые ссылки на переводы обновлений и сообщение об ошибке в переводе

Теперь вы можете почитать о новинках в DevTools на 6 других языках - Russian](/ru/blog/new-in-devtools-95), Chinese, Spanish, Japanese, Portuguese and Korean во вкладке Что нового (What’s new).

Начиная с версии 94, в Chrome вы можете выбрать предпочитаемый язык в DevTools. Если вы обнаружили какие-либо ошибки в переводе, помогите нам улучшить его, сообщив о проблеме с переводом через Больше опций (More options) > Справка (Help) > Сообщить об ошибке перевода (Report a translation bug).

Новые ссылки на переводы обновлений и сообщения об ошибках в переводах

Задачи в трекере Chromium: 1246245, 1245481

Улучшенный UI для командного меню в DevTools

Вам было сложно искать файлы в меню Command? Хорошие новости: пользовательский интерфейс Command Menu теперь улучшен!

Чтобы найти файл, откройте Command Menu при помощи шортката Control+P на Windows и Linux или Command+P на MacOS.

Улучшения пользовательского интерфейса Command Menu все еще продолжаются, следите за обновлениями!

Command Menu

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

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

Рассмотрите возможность использования 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 96

Chrome 95

Chrome 94

Chrome 93

Last updated: Improve article

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