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

Новые инструменты разработки длины 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.

Улучшен пользовательский интерфейс командного меню DevTools.

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

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

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

Командное меню

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

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

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

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

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

Что нового в DevTools

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