Yang baru di DevTools (Chrome 150)

Matthias Rohmer

Dipublikasikan: 30 Juni 2026

Chrome 150 menghadirkan proses debug memori yang ditingkatkan ke DevTools untuk agen, meningkatkan bantuan AI dengan lebih banyak widget, dan memperkenalkan kemampuan pengeditan penuh untuk aturan CSS @container dan @function.

DevTools untuk agen

Di seluruh rilis terbaru hingga v1.4.0, Chrome DevTools untuk agen telah memperluas kemampuan otomatisasi dan penelusuran bug browser berbasis agen secara signifikan.

Fitur dan peningkatan utama sejak rilis terakhir meliputi:

• Rangkaian proses debug memori (--experimentalMemory): Agen kini dapat merekam dan menganalisis snapshot heap V8 secara langsung untuk mendiagnosis kebocoran memori JavaScript dan menganalisis hierarki retensi objek.
• Pengelolaan ekstensi Chrome (--categoryExtensions): Agen dapat mengelola siklus proses ekstensi (menginstal, meng-uninstal, memuat ulang, mencantumkan) dan merekam log konsol service worker latar belakang untuk diagnostik.
• Kumpulan keterampilan agen: Direktori skills/ kini dipublikasikan langsung dalam distribusi paket npm, sehingga memungkinkan agen klien MCP otomatis menemukan dan menjalankan alur kerja penjelajahan dan proses debug khusus.
• Pengoptimalan token dan output: Membatasi dimensi screenshot di sumber mengurangi konsumsi token, dan dukungan TOON (Token-Oriented Object Notation) eksperimental mengoptimalkan pemformatan data terstruktur.
• Navigasi dan konteks yang ditingkatkan: list_pages kini menyertakan judul halaman bersama dengan URL dan ID target untuk pemilihan konteks multi-tab yang lebih baik, sementara opsi konfigurasi allowedUrlPattern dan blockedUrlPattern menerapkan keamanan cakupan penjelajahan yang ketat.

Untuk mengetahui info terbaru seputar DevTools untuk agen, dan untuk berkontribusi, buka repositori GitHub.

Insight yang lebih mendalam dalam bantuan AI

Panel Bantuan AI terus berkembang, memberikan detail selengkapnya dalam Panduan agen. Sembilan widget tambahan kini menampilkan data dari panel Lighthouse, Jaringan, Sumber, dan Performa. Widget ini membantu Anda lebih memahami data yang digunakan oleh Gemini saat memanggil alat agen untuk mengambil peristiwa performa, konten sumber daya, permintaan jaringan, dan lainnya.

Masalah Chromium: 460763995

Dukungan pengeditan penuh untuk lebih banyak aturan @CSS

Tab Gaya di panel Elemen menghadirkan kemampuan penulisan baru untuk fitur CSS modern:

• Pengeditan aturan @container di tempat: Anda kini dapat langsung mengedit nama penampung dan kondisi kueri dalam aturan CSS @container, sehingga memungkinkan eksperimen yang lancar dengan desain kueri penampung responsif.
• Pengeditan aturan CSS @function: Menambahkan dukungan pengeditan penuh untuk aturan CSS @function kustom.
• Pengeditan aturan @counter-style: Menambahkan penyelesaian kode untuk properti list-style-type, yang menautkannya langsung ke definisi @counter-style yang sesuai.
• Ciutkan aturan yang tidak berkontribusi: Setelan preferensi baru memungkinkan Anda menciutkan aturan gaya CSS yang tidak berkontribusi, sehingga panel Gaya tetap berfokus secara ketat pada gaya aktif.

Masalah Chromium: 507611251, 41491726, 480080406, 351662727, 514846131

Titik henti sementara yang tidak diduplikasi dan dukungan peta sumber rekursif di Sources

Panel Sumber menampilkan akurasi penelusuran bug yang ditingkatkan di seluruh pipeline build modern yang kompleks:

• Penghapusan duplikat titik henti logis: Penanda titik henti di gutter kini dihapus duplikatnya di seluruh paket yang dipecah kodenya dan template yang dikompilasi SSR/klien menggunakan pemetaan lokasi yang diselesaikan terdekat. Hal ini mencegah indikator titik henti sementara yang duplikat saat men-debug kode yang dibagikan di beberapa chunk atau lingkungan.
• Peta sumber rekursif EvalOrigin dan bertingkat: Debugger kini mendukung struktur EvalOrigin rekursif dan rantai terjemahan bertingkat di seluruh peta sumber, sehingga memastikan stack trace dan perilaku penelusuran yang akurat dalam alur kerja kompilasi multi-tahap.
• Pintasan keyboard untuk membuka baris: Menambahkan ALT + G sebagai pintasan keyboard tambahan untuk navigasi "Buka baris" di editor, untuk menghindari konflik dengan pintasan Gemini di Chrome yang baru.
• Pemformatan atribut impor: Memperbarui parser Acorn yang mendasarinya untuk mendukung pemformatan cetak cantik untuk sintaksis atribut impor JavaScript standar.

Masalah Chromium: 493674242, 485142682, 480172712, 491167992

Penguatan keamanan dan lintas origin di DevTools

Seperti banyak produk software lainnya, kami baru-baru ini melihat peningkatan laporan keamanan, yang sebagian besar ditemukan dengan bantuan AI. Tim terus meninjau dan memperbaiki masalah ini agar DevTools tetap aman:

• Perlindungan Self-XSS untuk Ekspresi Langsung: Menambahkan dialog peringatan Self-XSS dan mekanisme perlindungan saat membuat Ekspresi Langsung di Konsol.
• Daftar yang diizinkan untuk navigasi perekam dan verifikasi pemutaran ulang: Panel Perekam kini menerapkan daftar yang diizinkan untuk navigasi yang ketat guna mencegah navigasi ke halaman dengan hak istimewa tinggi, bersama dengan verifikasi asal ekstensi yang ketat dalam bagian pemutaran ulang.
• Batasan penggantian jaringan ekstensi: Penggantian jaringan yang dikelola oleh ekstensi kini secara ketat menerapkan kebijakan host runtime_blocked_hosts.
• Konstruksi @font-face yang aman: Pemfaktoran ulang pembuatan aturan @font-face menggunakan CSSStyleSheet API dan stringifikasi URL yang aman untuk mencegah injeksi CSS melalui URL data.

Sorotan lainnya

Kumpulan peningkatan kecil dan perbaikan bug dalam rilis ini:

• Performa: Memperbaiki inflasi ukuran transfer TraceTree untuk permintaan jaringan yang di-cache dengan memaksa ukuran transfer menjadi 0 byte pada cache yang teridentifikasi.
• Performa: Memperbarui pemformat performa untuk mendukung data kolom deviceScope Laporan UX Chrome (CrUX) opsional.
• Performa: Mengaktifkan scrolling horizontal di tabel Call Tree untuk mencegah pemotongan elipsis pada URL file yang panjang.
• Performa: Memperbaiki kerusakan rendering ulang dan kerusakan status DOM di sidebar Insight di beberapa file rekaman aktivitas.
• Performa: Memigrasikan pelacakan invalidasi linimasa dan setelan mode debug dari tanda eksperimental ke setelan DevTools standar.
• Jaringan: Mengembalikan perubahan nama kolom yang salah untuk memulihkan kolom Memiliki penggantian dan memperbaiki logika pengurutan untuk penggantian header dan konten.
• Jaringan: Memperbaiki gaya CSS attr() di kolom waterfall Server-Timing sehingga warna yang dihasilkan per baris dirender dengan benar.
• Jaringan: Memperbaiki pembuatan perintah Salin sebagai cURL untuk cookie tanpa nama.
• Aplikasi: Item penyimpanan sesi dan lokal yang terhubung di panel Aplikasi menggunakan infrastruktur StorageAgent baru.
• Aplikasi: Memperbaiki prioritas status Pemuatan spekulatif sehingga URL yang berhasil melakukan pengambilan data dan pra-render ditampilkan secara akurat sebagai "pra-render".
• Aplikasi: Menampilkan tooltip nilai byte yang tepat di seluruh kolom dalam tampilan Snapshot Heap.
• Masalah: Menampilkan jenis masalah BackUINavigationWouldSkipAd setiap kali navigasi kembali melewati entri iklan.
• Masalah: Menambahkan dukungan untuk menampilkan masalah permintaan verifikasi email (EmailVerificationRequestIssue).
• Lighthouse: Menambahkan kotak centang kategori Penjelajahan Agentik (dinonaktifkan secara default) di panel konfigurasi Lighthouse dan memperbarui mesin Lighthouse yang disertakan ke v13.3.0.

Masalah Chromium: 518021339, 40908621, 517519019, 487755345, 505284391, 465915378, 512908993, 40543651

Peningkatan aksesibilitas

Chrome 150 menghadirkan beberapa peningkatan pada pengumuman pembaca layar, struktur widget, dan semantik ARIA di DevTools:

• Peningkatan pengumuman pembaca layar saat memilih tab dan menjelajahi bagian dalam tab Gaya.
• Menambahkan tooltip deskriptif pada ikon tutup dialog dan mengizinkan atribut detail dan deskripsi ARIA pada tooltip.
• Menerapkan peran ARIA menuitem yang ketat pada item menu konteks untuk meningkatkan navigasi bagi teknologi pendukung.

Masalah Chromium: 510013788