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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

Панель Lighthouse теперь работает под управлением Lighthouse 8.4. Теперь Lighthouse определяет, является ли элемент LCP (Largeest Containful Paint) изображением с отложенной загрузкой, и рекомендует удалить атрибут 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 .
• Оставляйте комментарии в видеороликах YouTube «Что нового в DevTools» или YouTube «Советы по DevTools» .

Что нового в DevTools

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