Что нового в 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, используя more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к видеороликам YouTube «Что нового в DevTools» или «Советы разработчика» на YouTube .

Что нового в DevTools

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

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, используя more_vert Дополнительные параметры > Справка > Сообщить о проблеме DevTools в DevTools.
• Напишите в Твиттере @ChromeDevTools .
• Оставляйте комментарии к видеороликам YouTube «Что нового в DevTools» или «Советы разработчика» на YouTube .

Что нового в DevTools

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