Эта страница переведена с помощью Cloud Translation API.

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

Jecelyn Yeen

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

DevTools добавил более простой, но гибкий способ обновления длины в CSS!

На панели «Стили» найдите любое свойство CSS с длиной (например, height , padding ).

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

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

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

Проблемы с хромом: 1126178 , 1172993.

Скрыть проблемы на вкладке «Проблемы»

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

На вкладке «Проблемы» наведите указатель мыши на проблему, которую вы хотите скрыть. Нажмите « Дополнительные параметры». > Скрывайте подобные проблемы .

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

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

Проблема с хромом: 1175722.

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

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

Всегда выделяйте жирным шрифтом и сначала сортируйте собственные свойства на панели «Консоль» , «Источники» и «Свойства» .
Сгладьте отображение свойств на панели «Свойства» .

Например, приведенный ниже фрагмент создает link на объект URL с двумя собственными свойствами: 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 в консоли . Собственные свойства теперь выделены жирным шрифтом и отсортированы в первую очередь. Эти изменения упрощают обнаружение пользовательских свойств, особенно для веб-API (например, URL ) со многими унаследованными свойствами.

Собственные свойства выделены жирным шрифтом и отсортированы в первую очередь.

Помимо этих изменений, свойства на панели «Свойства» теперь также сглажены для удобства отладки свойств DOM, особенно для веб-компонентов .

Сгладить свойства

Проблемы с хромом: 1076820 , 1119900.

Маяк 8.4 на панели Маяк

На панели Lighthouse теперь работает Lighthouse 8.4. Lighthouse теперь определит, был ли элемент Largest Containful Paint (LCP) лениво загруженным изображением, и порекомендует удалить из него атрибут loading .

Чтобы получить более подробную информацию об обновлениях, ознакомьтесь с разделом «Что нового в Lighthouse 8.4» .

Аудит LCP с отложенной загрузкой в отчете Lighthouse

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

Сортировка фрагментов на панели «Источники»

Фрагменты на панели «Фрагменты» под панелью «Источники» теперь отсортированы в алфавитном порядке. Раньше оно не сортировалось.

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

Сортировка фрагментов на панели «Источники»

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

Новые ссылки на переведенные примечания к выпуску и сообщение об ошибке перевода.

Теперь вы можете прочитать примечания к выпуску DevTools на шести других языках — русском , китайском , испанском , японском , португальском и корейском — на вкладке «Что нового».

Начиная с Chrome 94, вы можете установить предпочитаемый язык в DevTools. Если вы обнаружили какие-либо проблемы с переводами, помогите нам улучшить их, сообщив о проблеме с переводом через Дополнительные параметры > Справка > Сообщить об ошибке перевода .

Новые ссылки на переведенные примечания к выпуску и сообщение об ошибке перевода.

Проблемы с хромом: 1246245 , 1245481.

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

Откройте меню команд для поиска файла с помощью сочетания клавиш Control + P в Windows и Linux или Command + P в MacOS.

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

Проблема с хромом: 1201997.

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

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

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

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

Отправьте нам предложение или отзыв через crbug.com .
Сообщите о проблеме DevTools, используя дополнительные параметры. > Справка > Сообщить о проблемах DevTools в DevTools.
Напишите в Твиттере @ChromeDevTools .
Оставляйте комментарии к нашим видеороликам «Что нового в DevTools на YouTube » или «Советы по DevTools» на YouTube .