Chrome DevTools 152: нові інструменти для мереж, елементів і продуктивності
Chrome 152 приніс одне з найпомітніших оновлень DevTools за останній час — зміни торкнулися панелей Network, Elements, Performance і Console одночасно. Для тих, хто щодня відкриває інструменти розробника хоча б раз на день, це не косметика, а реальна економія часу на рутинних задачах.
Network: "Resend" замість "Replay XHR"
Найпомітніша зміна — функцію "Replay XHR" перейменували й суттєво розширили до "Resend". Раніше повторно надіслати можна було лише XHR-запити, тепер — будь-який запит, який підтримує повторну відправку, і Chrome автоматично конвертує його у виклик fetch() перед повторною відправкою, зберігаючи точність відтворення оригінального запиту.
До цього додали ще кілька зручностей: окрему колонку Preloaded у таблиці запитів (щоб одразу бачити, які ресурси завантажились завдяки <link rel="preload">, а які ні), і опції декодування бінарного payload прямо в інтерфейсі — Base64, Hex або UTF-8, без копіювання даних у сторонній конвертер. Параметри запиту (query string) тепер декодуються автоматично, що особливо приємно для довгих URL з купою параметрів, закодованих у URL-encoding.
Elements: значки для кастомних елементів і прив'язка псевдоелементів
Панель Elements отримала одразу кілька покращень для тих, хто працює з Web Components і сучасним CSS. Кастомні елементи (custom elements) тепер відображаються в DOM-дереві зі спеціальними значками-"адорнерами" — одразу видно, який тег є кастомним компонентом, а не стандартним HTML-елементом.
Для CSS покращили підтримку вкладеності (nesting) — при наведенні на вкладений селектор підсвічується його батьківський селектор, що допомагає швидше зрозуміти каскад стилів у сучасному вкладеному CSS без препроцесорів. І ще одна дрібниця, яка заощадить чимало часу: тепер можна вибрати псевдоелемент (наприклад, ::before чи ::after) прямо в DOM-дереві, і він автоматично прив'яжеться до змінної $0 у консолі — тобто можна одразу звертатися до нього через JavaScript, не вигадуючи обхідних шляхів через getComputedStyle.
Performance: Live Metrics тепер бачать soft navigations
Це продовження історії, яку ми вже розповідали раніше: після фінального origin trial Soft Navigations API у Chrome DevTools нарешті з'явилась практична інтеграція в реальному часі. Панель Live Metrics тепер відстежує Core Web Vitals, включно з INP, не лише для першого завантаження сторінки, а й для внутрішніх переходів у SPA — саме тих переходів, які раніше "губилися" для метрик продуктивності.
До цього додали кастомізовані пресети для скріншотів під час запису продуктивності та автоматичне розкриття (reveal) траси одразу після виклику console.profileEnd() в коді — більше не треба вручну шукати потрібний запис серед списку трасувань.
Console: таблиці й захист від побічних ефектів
Дрібна, але дуже практична зміна для тих, хто аналізує масиви даних через console.table(): результат тепер можна скопіювати прямо в буфер обміну у форматі Markdown-таблиці або CSV, одним кліком, без ручного форматування виводу консолі.
Дебагер також отримав захист від побічних ефектів (side-effect protection): при наведенні курсору на вираз для попереднього перегляду значення Chrome тепер обережніший з потенційно мутуючими операторами — щоб простий hover для перегляду змінної випадково не змінив стан застосунку під час дебагінгу.
Що це означає на практиці
Жодна з окремих змін не змінює правила гри кардинально, але разом вони прибирають дрібне тертя з щоденної роботи розробника: менше перемикань між DevTools і сторонніми інструментами для декодування payload, менше ручного форматування табличних даних, менше плутанини при роботі з CSS-вкладеністю і custom elements. Якщо ваша команда активно працює з продуктивністю SPA-застосунків, оновлені Live Metrics варто перевірити першими — саме там накопичилось найбільше практичної користі за останні кілька релізів Chrome.