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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

На вкладке Issues наведите курсор на проблему, которую вы хотите скрыть. Нажмите More options > Скрыть подобные проблемы .

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

Проблема с хромом: 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, особенно для веб-компонентов .

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

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

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

Более подробную информацию об обновлениях можно найти в разделе «Что нового в Lighthouse 8.4» .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Отправляйте нам отзывы и запросы на новые функции на crbug.com .
• Сообщить о проблеме DevTools можно с помощью функции more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Твитните @ChromeDevTools .
• Оставляйте комментарии к видео «Что нового в DevTools» на YouTube или к видео «Советы по DevTools» на YouTube .

Что нового в DevTools

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