Что нового в 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» .

Проблема с хромом: 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.

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

Что нового в DevTools

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

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

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

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

Выпуск хрома: 1175722

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

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

• Всегда жирный и сортируйте собственные свойства сначала в консоли , панели источников и панели свойств .
• Сплющите свойства отображения на панели свойств .

Например, приведенный ниже фрагмент создает link объекта URL с 2 собственными свойствами: 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 на панели маяка

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

Посмотрите , что нового в Lighthouse 8.4 для получения более подробной информации об обновлениях.

Выпуск хрома: 772558

Сортировать фрагменты на панели источников

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

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

Выпуск хрома: 1243976

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

Теперь вы можете нажать, чтобы прочитать заметки о выпуске Devtools на 6 других языках - русский , китайский , испанский , японский , португальский и корейский на вкладке What of What of What.

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

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

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

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

Откройте меню команды , чтобы найти файл с помощью элемента управления сочетание клавиатуры + P в Windows и Linux, или команды + P в MacOS.

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

Выпуск хрома: 1201997

Скачать каналы предварительного просмотра

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

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

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

• Отправьте предложение или отзыв нам через crbug.com .
• Сообщите о проблеме Devtools, используя больше вариантов > Помощь > Сообщить о вопросах DevTools в DevTools.
• Твит на @chromedevtools .
• Оставьте комментарии к нашим новому в Devtools YouTube Videos или Devtools Советы на YouTube .

Что нового в DevTools

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

Jecelyn Yeen

New CSS length authoring tools

DevTools added an easier yet flexible way to update lengths in CSS!

In the Styles pane, look for any CSS property with length (eg height , padding ).

Hover over the unit type, and notice the unit type is underlined. Click on it to select a unit type from the dropdown.

Hover over the unit value, and your mouse pointer is changed to horizontal cursor. Drag horizontally to increase or decrease the value. To adjust the value by 10, hold the Shift key when dragging.

You can still edit the unit value as text — just click on the value and start editing.

Chromium issues: 1126178 , 1172993

Hide issues in the Issues tab

You can now hide specific issues in the Issues tab to focus only on those issues that matter to you.

In the Issues tab , hover over on an issue you would like to hide. Click on More options > Hide issues like this .

All hidden issues will be added under the Hidden issues pane. Expand the pane. You can unhide all hidden issues or a selected one.

Chromium issue: 1175722

Improved the display of properties

DevTools improve the display of properties by:

• Always bold and sort own properties first in the Console , Sources panel and Properties pane.
• Flatten the properties display in the Properties pane.

For example, the snippet below creates an URL object link with 2 own properties: user and access , and updates the value of an inherited property 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}`;

Try logging link in the Console . Own properties are now bold and sorted first. These changes make it easier to spot custom properties, especially for Web APIs (eg URL ) with many inherited properties.

Apart from these changes, the properties in the Properties pane are also flattened now for better DOM properties debugging experience, especially for Web components .

Chromium issues: 1076820 , 1119900

Lighthouse 8.4 in the Lighthouse panel

The Lighthouse panel is now running Lighthouse 8.4. Lighthouse will now detect if the Largest Containful Paint (LCP) element was a lazy-loaded image and recommend removing the loading attribute from it.

Check out the What's new in Lighthouse 8.4 for more details on the updates.

Chromium issue: 772558

Sort snippets in the Sources panel

The snippets in the Snippets pane under the Sources panel are now sorted alphabetically. Previously, it's not sorted.

Utilize the snippets feature to run commands quicker. Watch this video for a tip !

Chromium issue: 1243976

New links to translated release notes and report a translation bug

You can now click to read the DevTools release notes in 6 other languages - Russian , Chinese , Spanish , Japanese , Portuguese and Korean via the What's new tab.

Since Chrome 94, you can set your preferred language in DevTools. If you found any issues with the translations, help us improve it by reporting a translation issue via More options > Help > Report a translation bug .

Chromium issues: 1246245 , 1245481

Improved UI for DevTools command menu

Did you find it hard to search for a file in the Command Menu ? Good news for you, the Command Menu user interface is now enhanced!

Open the Command Menu to search for a file with keyboard shortcut Control + P in Windows and Linux, or Command + P in MacOS.

The UI improvements of the Command Menu is still ongoing, stay tuned for more updates!

Chromium issue: 1201997

Download the preview channels

Consider using the Chrome Canary , Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

• Submit a suggestion or feedback to us via crbug.com .
• Report a DevTools issue using the More options > Help > Report a DevTools issues in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

Что нового в DevTools

A list of everything that has been covered in the What's new in DevTools series.

Jecelyn Yeen

New CSS length authoring tools

DevTools added an easier yet flexible way to update lengths in CSS!

In the Styles pane, look for any CSS property with length (eg height , padding ).

Hover over the unit type, and notice the unit type is underlined. Click on it to select a unit type from the dropdown.

Hover over the unit value, and your mouse pointer is changed to horizontal cursor. Drag horizontally to increase or decrease the value. To adjust the value by 10, hold the Shift key when dragging.

You can still edit the unit value as text — just click on the value and start editing.

Chromium issues: 1126178 , 1172993

Hide issues in the Issues tab

You can now hide specific issues in the Issues tab to focus only on those issues that matter to you.

In the Issues tab , hover over on an issue you would like to hide. Click on More options > Hide issues like this .

All hidden issues will be added under the Hidden issues pane. Expand the pane. You can unhide all hidden issues or a selected one.

Chromium issue: 1175722

Improved the display of properties

DevTools improve the display of properties by:

• Always bold and sort own properties first in the Console , Sources panel and Properties pane.
• Flatten the properties display in the Properties pane.

For example, the snippet below creates an URL object link with 2 own properties: user and access , and updates the value of an inherited property 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}`;

Try logging link in the Console . Own properties are now bold and sorted first. These changes make it easier to spot custom properties, especially for Web APIs (eg URL ) with many inherited properties.

Apart from these changes, the properties in the Properties pane are also flattened now for better DOM properties debugging experience, especially for Web components .

Chromium issues: 1076820 , 1119900

Lighthouse 8.4 in the Lighthouse panel

The Lighthouse panel is now running Lighthouse 8.4. Lighthouse will now detect if the Largest Containful Paint (LCP) element was a lazy-loaded image and recommend removing the loading attribute from it.

Check out the What's new in Lighthouse 8.4 for more details on the updates.

Chromium issue: 772558

Sort snippets in the Sources panel

The snippets in the Snippets pane under the Sources panel are now sorted alphabetically. Previously, it's not sorted.

Utilize the snippets feature to run commands quicker. Watch this video for a tip !

Chromium issue: 1243976

New links to translated release notes and report a translation bug

You can now click to read the DevTools release notes in 6 other languages - Russian , Chinese , Spanish , Japanese , Portuguese and Korean via the What's new tab.

Since Chrome 94, you can set your preferred language in DevTools. If you found any issues with the translations, help us improve it by reporting a translation issue via More options > Help > Report a translation bug .

Chromium issues: 1246245 , 1245481

Improved UI for DevTools command menu

Did you find it hard to search for a file in the Command Menu ? Good news for you, the Command Menu user interface is now enhanced!

Open the Command Menu to search for a file with keyboard shortcut Control + P in Windows and Linux, or Command + P in MacOS.

The UI improvements of the Command Menu is still ongoing, stay tuned for more updates!

Chromium issue: 1201997

Download the preview channels

Consider using the Chrome Canary , Dev or Beta as your default development browser. These preview channels give you access to the latest DevTools features, test cutting-edge web platform APIs, and find issues on your site before your users do!

Getting in touch with the Chrome DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

• Submit a suggestion or feedback to us via crbug.com .
• Report a DevTools issue using the More options > Help > Report a DevTools issues in DevTools.
• Tweet at @ChromeDevTools .
• Leave comments on our What's new in DevTools YouTube videos or DevTools Tips YouTube videos .

Что нового в DevTools

A list of everything that has been covered in the What's new in DevTools series.