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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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