Google упрощает отладку благодаря новым функциям Devtools Chrome 106

Отладка может быть утомительной и еще более раздражающей, когда вы не можете легко найти ошибку. Инструменты разработчика Chrome 106 (devtools) упрощают процесс отладки, делая его проще и быстрее.

Теперь вы можете легко сортировать файлы, оптимизировать поиск, скрывать сторонние скрипты, получать доступ к подробным отчетам о производительности и многое другое, обсуждаемое в этой статье. Эти инструменты разработки необходимы, особенно для разработчиков, работающих с фреймворками JavaScript, такими как Angular, React и Vue.js, у которых теперь есть интерактивная и упрощенная консоль для визуализации и отладки их кода.

Давайте подробнее рассмотрим некоторые из этих новых функций:

Чтобы в полной мере воспользоваться новыми обновлениями Chrome 106, загрузите версии Chrome Canary, Dev или Beta в качестве браузера для разработки по умолчанию. У вас будет доступ к новейшим инструментам разработчика, которые позволяют тестировать API-интерфейсы веб-платформы и быстро выявлять проблемы или ошибки на вашем сайте, чтобы обеспечить максимальное удобство для ваших пользователей.

Теперь вы можете напрямую переходить к компонентам вашего приложения, группируя файлы по авторским/развернутым на исходной панели. Перейдите в «Источник» > «3-точечное меню» > «Группировать по автору/развертыванию». Теперь, когда вы открываете файлы, вы можете видеть только развернутые файлы на панели.

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

2 Упрощенный поиск файлов

Вы можете ограничить поиск на исходной панели только релевантными файлами. В предыдущих версиях Chrome файлы, созданные платформой и другими третьими сторонами, отображались в результатах поиска, что затрудняло определение элемента поиска.

Это обновление представляет собой версию devtools для оптимизации вашего поиска в веб-браузерах с помощью поисковых шпаргалок Google. Чтобы настроить этот параметр, перейдите в меню из трех точек > Скрыть источники из списка игнорирования.

3 Скрыть сторонние скрипты

Сторонние скрипты заполняют вашу консоль? В Chrome 106 добавлено расширение списка игнорирования в исходной карте, чтобы вы могли скрывать скрипты, автоматически сгенерированные фреймворками и другими третьими сторонами.

Чтобы активировать эту функцию, выберите «Настройки» > «Список игнорирования» > «Автоматически добавлять известные сторонние скрипты в список игнорирования». Когда вы снова откроете файлы, консоль покажет только соответствующие файлы, связанные с вашим приложением. Теперь вы можете видеть свой код, не отвлекаясь.

4 подробные трассировки стека

Благодаря новой функции в Chrome 106 вам потребуется меньше времени для выявления ошибки в консоли. Инструменты разработчика Chrome дают вам подробное представление об асинхронных операциях и их основных причинах. В предыдущих версиях были видны только события, приведшие к операции. Последние devTools показывают всю цепочку операций и их первопричины.

Google настроил метод console.createTask() в Chrome 106. Этот метод позволяет платформам выполнять трассировку стека на консоли. Отладка JavaScript с помощью devtools так же проста, как отладка CSS с помощью Chrome.

5 Отслеживание взаимодействий на панели производительности

Отслеживайте новые взаимодействия на панели «Производительность », чтобы выявить потенциальные проблемы с реагированием на ваше приложение. В Chrome 106 все взаимодействия отображаются на дорожке «Взаимодействия» после операции. Трек показывает источник взаимодействий и их идентификаторы. Отслеживание помогает определить источник и соответствующим образом перехватить его.

6 LCP Timing Insights на панели производительности

Подробная информация о времени крупнейшего Contentful Paint (LCP) теперь доступна на панели анализа производительности. LCP — это жизненно важный показатель веб-производительности, который сообщает о времени рендеринга изображений или блоков текста, которое требуется для загрузки на веб-страницу. 2,5 секунды или меньше — это хороший показатель производительности.

Чтобы просмотреть статистику, перейдите на панель производительности>меню с тремя точками-дополнительные сборы>статистика производительности. Когда вы воспроизводите запись, на панели «Подробности» отображается время загрузки.

Дополнительные обновления в Chrome 106

Другие улучшения Chrome 106 включают в себя:

• Вы можете без проблем экспортировать записи сценариев с панели «Рекордер ». Кнопка экспорта имела проблему в предыдущих версиях.
• Теперь у вас есть палитра цветов в элементах SVG панели «Стили ».
• Вы можете определить сценарии, искажающие макет, на панели Performance Insights .
• Вы можете отобразить пути для веб-шрифтов LCP на панели Performance Insights .

Эти функции могут улучшить использование инструментов разработки браузера.

Что вы получаете от Chrome 106

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

Дополнения Chrome 106 позволят вам управлять своим приложением и оптимизировать его производительность. Воспользуйтесь этими преимуществами, обновив Chrome до последней версии 106.