Поиск по сайту:

Google упрощает отладку с помощью новых функций Devtools Chrome 106


Инструменты разработчика в Chrome 106 были улучшены и добавлены новые функции.

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

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

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

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

1. Файлы, сгруппированные по авторству/развертыванию.

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

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

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

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

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

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

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

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

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

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

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

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

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

6. Информация о времени LCP на панели производительности

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

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

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

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

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

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

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

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

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

Статьи по данной тематике: