Yang baru di DevTools (Chrome 151)

Matthias Rohmer

Dipublikasikan: 28 Juli 2026

Chrome 151 memperkenalkan lebih banyak widget untuk panduan Agen dalam bantuan AI, perincian spesifisitas CSS yang mendetail di tab Styles, dukungan untuk elemen semu ::interest-button, dan update besar pada server MCP DevTools.

DevTools untuk agen

Di seluruh rilis terbaru hingga v1.6.0, Chrome DevTools untuk agen telah memperluas kemampuan pen-debug-annya secara signifikan untuk agen pengodean seperti Antigravity, Claude, Codex, dan lainnya.

Pembaruan di seluruh versi v1.4.0 hingga v1.6.0 mencakup:

• Peningkatan pen-debug-an memori: Alat get_heapsnapshot_duplicate_strings baru ini mendeteksi pemborosan memori yang disebabkan oleh alokasi string yang berlebihan di heap JavaScript. get_heapsnapshot_details menampilkan jumlah total objek dan agregat ukuran memori, agregat snapshot heap yang dapat difilter, jalur retensi root GC, dan memungkinkan perbedaan memori di seluruh snapshot.
• Encoding format GCF (experimentalGcfFormat): Menambahkan dukungan untuk respons alat yang di-encode GCF guna mengoptimalkan bandwidth dan efisiensi parsing untuk klien yang didukung.
• Perutean halaman multi-agen serentak & konteks terisolasi: --experimentalPageIdRouting memungkinkan sub-agen paralel beroperasi di tab browser yang berbeda secara serentak menggunakan perutean pageId eksplisit. Mode --isolated dan parameter isolatedContext membuat profil dan penyimpanan Chrome sementara per sesi.

Untuk mempelajari lebih lanjut dan memulai, buka repositori DevTools untuk agen di GitHub.

Bantuan AI

Gambar/Rekaman Layar: Panel bantuan AI yang menampilkan widget inline Jalur Jaringan baru dan panduan interaktif dengan dukungan tabel GFM.

Panel Bantuan AI terus berkembang, memberikan lebih banyak detail dalam Panduan agen dengan widget Network Track khusus (merender aktivitas jaringan performa inline dengan navigasi sekali klik untuk memperbesar rentang waktu di panel Performa) dan widget Network Requests List (menampilkan parameter permintaan terstruktur dalam tabel interaktif).

Selain itu, pesan respons kini sepenuhnya mendukung rendering tabel Markdown (GFM) yang Kompatibel dengan GitHub untuk ringkasan data tabulasi yang diformat.

Perincian spesifisitas CSS dan dukungan ::interest-button

Panel Elemen menghadirkan alat inspeksi dan penulisan CSS yang lebih mendalam untuk API platform web modern:

• Perincian spesifisitas CSS yang mendetail: Mengarahkan kursor ke nama pemilih di tab Gaya kini akan menampilkan tooltip mendetail yang menguraikan kontribusi setiap class, ID, elemen, atau pseudo-class terhadap (a, b, c)perhitungan spesifisitas. Ini adalah kontribusi komunitas, terima kasih kepada @hjanuschka.
• Elemen semu ::interest-button: DevTools kini sepenuhnya mengurai dan menampilkan elemen semu CSS ::interest-button baru (bagian dari spesifikasi interesttarget HTML) dalam ringkasan hierarki Elemen dan tab Gaya.
• Penautan target asinkron untuk atribut relasi HTML: Atribut HTML seperti popovertarget, interesttarget, dan commandfor kini mengambil dan menautkan node DOM targetnya secara visual dan inline secara asinkron.
• Rendering lambat untuk stylesheet besar: Tab Styles kini menggunakan dekorasi properti lambat saat elemen melebihi 200 properti CSS, sehingga mengurangi waktu pemblokiran rendering dari beberapa detik menjadi milidetik.

Masalah Chromium: 353436867, 453705247, 524406293, 457696384, 524131115

Proses debug memori: Atribusi konteks native dan retensi penutupan

Mendiagnosis kebocoran memori JavaScript yang kompleks dalam aplikasi web multi-frame atau multi-konteks kini jauh lebih jelas di panel Memori:

• Atribusi konteks V8 native: Snapshot heap kini menjalankan algoritma atribusi dua fase. Inferensi penunjuk statis menyelesaikan peta native_context, sementara kemampuan jangkauan grafik melacak objek yang tersisa. Objek yang dapat dijangkau dari satu konteks native diatribusikan langsung ke konteks tersebut, sedangkan objek yang dapat dijangkau dari beberapa konteks dikategorikan ke dalam bucket konteks bersama.
• Filter"Dipertahankan oleh Konteks": Filter UI baru dalam perspektif Snapshot Heap memungkinkan Anda mengisolasi objek yang dipertahankan secara eksklusif melalui objek konteks penutupan JavaScript.
• Urutan tampilan properti yang dapat dikonfigurasi: Tombol menu konteks baru, Urutkan properti menurut abjad (diaktifkan secara default), memungkinkan Anda beralih antara pengurutan menurut abjad dan urutan penyisipan properti JS asli saat memeriksa properti objek heap.

Masalah Chromium: 497855658, 423838364, 40833016

API Ekstensi yang Diubah menjadi Promise dan penguatan keamanan

API ekstensi DevTools telah diupdate dengan pola asinkron modern dan kontrol keamanan yang lebih ketat:

• Dukungan Promise Native: Metode asinkron di chrome.devtools.network (getHAR(), Request.getContent()), chrome.devtools.panels, dan chrome.devtools.inspectedWindow (eval(), getResources(), Resource.getContent(), Resource.setContent()) kini menampilkan objek Promise JavaScript standar saat dipanggil tanpa parameter callback.
• Batas keamanan ekstensi: Ekstensi DevTools kini dibatasi untuk mengambil resource HAR dari URL target yang diblokir, harus memenuhi izin extensionsOnChromeUrls untuk evaluasi lintas ekstensi di inspectedWindow.eval, dan menerapkan pemeriksaan allowFileAccess pada resource file://.

Sorotan dan perbaikan lainnya

Kumpulan peningkatan kecil dan perbaikan bug dalam rilis ini:

• Performa: Menambahkan penanda linimasa Soft FCP (First Contentful Paint) bersama penanda Soft LCP dan Soft Navigation, dengan header laci detail yang diperbarui.
• Performa: Menambahkan penjaga untuk melewati pemeriksaan tekanan komputasi selama kalibrasi pembatasan CPU di perangkat Android tanpa dukungan PressureObserver.
• Jaringan: Memperbarui Salin sebagai cURL untuk menambahkan awalan --url ke URL target guna mencegah kesalahan interpretasi flag command line untuk URL dengan awalan tanda hubung.
• Sumber: Mengaktifkan resolusi cakupan peta sumber secara default, sehingga meningkatkan resolusi cakupan variabel dan penghapusan minifikasi simbol selama proses debug.
• Setelan: Memperbarui preset perangkat yang di-emulator untuk model iPhone dan Pixel yang lebih baru dengan inset area aman yang terverifikasi, dan mengisi otomatis kolom User-Agent perangkat kustom dengan navigator.userAgent. (Masalah Chromium: 40718410, 518215252)
• Setelan: Memperbarui drop-down setelan Penanganan link untuk menampilkan judul ekstensi yang mudah digunakan, bukan URL origin ekstensi mentah.
• Lighthouse: Memperbarui modul Lighthouse yang di-bundle ke versi 13.4.0. (Masalah Chromium: 40543651)

Peningkatan aksesibilitas

Chrome 151 menghadirkan peningkatan aksesibilitas berikut:

• Elemen: Memulihkan visibilitas ikon toolbar yang diaktifkan/dinonaktifkan (seperti tombol Lanjutkan eksekusi skrip) dalam mode Kontras Tinggi Windows/@media (forced-colors: active) dengan menghapus penggantian background-color yang bertentangan. (Masalah Chromium: 519762185)
• Konsol: Menambahkan tooltip teks lengkap title yang dapat diakses untuk nilai string Ekspresi Langsung yang terpotong di Pin Konsol.