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

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

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

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

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

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

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

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

Теперь вы можете переходить непосредственно к компонентам приложения, группируя файлы по авторству/развернутости на панели источников. Перейти к Source > 3-dot-menu > Group by Authored/Deployed. Теперь, когда вы открываете файлы, вы можете видеть на панели только ваши развернутые файлы

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

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

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

Это обновление представляет собой версию devtools для оптимизации поиска в веб-браузерах с помощью шпаргалок поиска Google. Для настройки этого параметра перейдите в меню 3-dot-menu > Hide ignore-list sources

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

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

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

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

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

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

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

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

6. Временные показатели LCP в панели производительности

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

Для просмотра информации перейдите на панель производительности>3-dot-menu-more tolls>performance insights. Когда вы воспроизводите запись, на панели подробностей отображается время загрузки

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

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

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

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

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

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

    Теги

    Об авторе

    Алексей Белоусов

    Привет, меня зовут Филипп. Я фрилансер энтузиаст . В свободное время занимаюсь переводом статей и пишу о потребительских технологиях для широкого круга изданий , не переставая питать большую страсть ко всему мобильному =)

    Комментировать

    Оставить комментарий