Google спрощує налагодження завдяки новим функціям Devtools Chrome 106

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

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

Давайте детальніше розглянемо деякі з цих нових функцій:

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

Тепер ви можете перейти безпосередньо до компонентів програми, згрупувавши файли за авторськими/розгорнутими на панелі джерел. Перейдіть до «Джерело» > «Меню з трьома крапками» > «Групувати за автором/розгорнутим». Тепер, коли ви відкриваєте файли, ви можете бачити лише свої розгорнуті файли на панелі.

У попередніх версіях 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 на панелі продуктивності

Деталі часу відображення найбільшого вмісту (LCP) тепер доступні на панелі статистики продуктивності. LCP — це важливий показник веб-продуктивності, який повідомляє про час візуалізації зображень або блоків тексту, необхідний для завантаження на веб-сторінку. 2,5 секунди або менше є хорошим показником продуктивності.

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

Додаткові оновлення в Chrome 106

Серед інших удосконалень Chrome 106:

• Ви можете без проблем експортувати записи сценаріїв із панелі «Записувач». У попередніх версіях була проблема з кнопкою експорту.
• Тепер у вас є засіб вибору кольорів на панелі стилів Елементи SVG.
• Ви можете визначити сценарії, що спотворюють ваш макет, на панелі Performance Insights.
• Ви можете відобразити шляхи для веб-шрифтів LCP на панелі Performance Insights.

Ці функції можуть покращити використання інструментів розробки браузера.

Що ви отримуєте від Chrome 106

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

Доповнення Chrome 106 дозволять вам керувати програмою та оптимізувати її продуктивність. Скористайтеся цими перевагами, оновивши Chrome 106 до останньої версії.