Yang baru di DevTools (Chrome 152)

Matthias Rohmer

Dipublikasikan: 25 Agustus 2026

Chrome 152 menghadirkan peningkatan signifikan pada proses debug jaringan dengan pengiriman ulang permintaan dan pemeriksaan payload biner, hiasan elemen kustom dan penyusunan CSS yang ditingkatkan di Elemen, Core Web Vitals untuk navigasi ringan di Metrik Langsung Performa, pengeksporan tabel terstruktur di Konsol, dan peningkatan untuk server MCP DevTools.

DevTools untuk agen

Rilis v1.7.0 terbaru server MCP Chrome DevTools membangun kemampuan pen-debug memori yang diperkenalkan sebelumnya untuk agen coding seperti Antigravity, Claude, Codex, dan lainnya:

• Detail objek cuplikan heap (get_heapsnapshot_object_details): Periksa properti objek JavaScript, nama kelas, dan jalur retensi root GC yang mendetail langsung dari cuplikan heap.
• Pemfilteran konteks V8 native: Memfilter objek cuplikan heap menurut konteks eksekusi native dan memeriksa konteks native dalam ringkasan cuplikan.
• Peningkatan stabilitas dan siklus proses daemon: Menambahkan retensi permintaan jaringan per navigasi yang terbatas, validasi ID sesi, peringatan ketidakcocokan versi CLI-ke-daemon, dan penonaktifan pekerja yang lancar saat pelepasan konteks.

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

Jaringan: Mengedit dan mengirim ulang permintaan, insight pra-pemuatan, dan decoding payload biner

• Mengirim ulang permintaan pengambilan dan XHR: Item menu konteks "Putar Ulang XHR" sebelumnya kini menjadi Kirim Ulang. Sekarang, fitur ini mendukung semua permintaan jaringan yang dapat diambil, mengonversi permintaan standar menjadi panggilan fetch() sambil mempertahankan fidelitas pemutaran ulang penuh bersama dengan XHR. Permintaan juga melacak dan menampilkan konteks eksekusi dan asal konsolnya.
• Kolom yang dimuat sebelumnya dan "Salin sebagai elemen pramuat": Kolom Dimuat sebelumnya khusus yang baru menampilkan apakah permintaan jaringan dimulai menggunakan pemuatan spekulatif. Anda juga dapat mengklik kanan permintaan apa pun dan memilih Salin sebagai elemen pra-muat untuk membuat tag <link rel="preload"> yang siap untuk dimasukkan ke dalam HTML Anda. Petunjuk Awal kini dikategorikan di kolom Pemrakarsa.
• Penampil biner untuk payload permintaan: Tab Payload kini menyertakan opsi metode decoding (Base64, Hex, dan UTF-8) untuk payload permintaan biner dan terkompresi, yang mencerminkan tab Respons.
• Kolom Nomor Permintaan yang Disematkan: Kolom Permintaan # kini disematkan ke posisi pertama di petak data Jaringan untuk mempermudah referensi permintaan.
• Pemfilteran host situs yang sama: Penelusuran domain, nama host, atau port (misalnya, localhost atau example.com) di kolom filter Jaringan kini secara akurat memfilter permintaan situs yang sama.
• Dekode parameter kueri default: Parameter kueri dan formulir di tab Payload kini didekode secara otomatis untuk semua permintaan.

Masalah Chromium: 40726969, 41299075, 40138847, 40222701, 525848667, 507077182, 498482622, 520437951, 40267477

Elemen: Hiasan elemen kustom, interaksi pemilih induk CSS bertingkat, dan pemilihan elemen semu $0

Memeriksa dan membuat komponen web serta CSS modern menjadi lebih cepat dan intuitif di panel Elemen:

• Badge penghias elemen kustom: Elemen HTML kustom (diidentifikasi oleh tag dengan tanda hubung atau atribut is="..." untuk elemen bawaan yang disesuaikan) kini menampilkan badge penghias custom-element dalam ringkasan hierarki DOM.
• Interaksi & spesifisitas pemilih induk CSS bertingkat: Mengarahkan kursor ke pemilih induk dalam aturan CSS bertingkat dan aturan bertingkat yang diwariskan kini menandai elemen yang cocok di halaman dan merespons pemfilteran tab Gaya. Menambahkan popover tooltip spesifisitas untuk aturan @nested-declarations.
• Pemilihan elemen semu melalui $0: Memilih elemen semu seperti ::before atau ::after di hierarki DOM Elemen kini mengikatnya langsung ke variabel konsol $0 untuk pemeriksaan JavaScript langsung.
• Penyelesaian otomatis untuk jenis text-wrap dan <image>: Panel Styles kini menyarankan semua nilai kata kunci untuk text-wrap (wrap, nowrap, balance, pretty, stable) dan melengkapi otomatis properti CSS yang menerima jenis data <image>.
• Perhatian terhadap scrollbar Model Box: Diagram metrik Model Box kini menghitung dan merender dimensi kotak konten secara akurat saat elemen memiliki scrollbar yang terlihat.

Masalah Chromium: 367440148, 535517817, 535522242, 535523039, 537724428, 399305533, 334984154, 383355294, 326260752, 389342065

Performa: Metrik navigasi ringan di Metrik Langsung dan preset screenshot kustom

• Dukungan Metrik Live untuk navigasi ringan: Tampilan Metrik Live kini mencatat dan melaporkan Core Web Vitals (seperti LCP dan INP) untuk navigasi ringan sisi klien di aplikasi halaman tunggal secara default, yang didukung oleh upgrade ke web-vitals v6.0.0.
• Preset pengambilan screenshot kustom: Menampilkan preset batas jumlah dan ukuran frame screenshot yang dapat dikonfigurasi untuk pelacakan CDP di panel Performa guna menyesuaikan kualitas rekaman visual dalam anggaran memori.
• Pengungkap rekaman aktivitas console.profileEnd(): Memanggil console.profileEnd() dalam kode atau konsol Anda kini akan otomatis membuka dan menampilkan rekaman aktivitas yang direkam di panel Performa.
• Ringkasan jalur kustom Extensibility API: Ringkasan rekaman aktivitas performa kini memproses dan menampilkan grup jalur kustom yang didaftarkan menggunakan Extensibility API.

Masalah Chromium: 514721939, 490140054, 536954453, 535506117

Konsol: Mengekspor tabel sebagai Markdown atau CSV dan perlindungan efek samping

• Menyalin tabel konsol sebagai Markdown atau CSV: Tabel yang dicatat menggunakan console.table() kini dapat disalin langsung ke papan klip Anda sebagai tabel Markdown yang diformat atau data CSV dari menu konteks.
• Perlindungan evaluasi efek samping: Evaluasi saat kursor diarahkan di debugger kini melindungi dari ekspresi yang berisi new, template literal yang diberi tag, import() dinamis, dan operator delete, sehingga mencegah mutasi status yang tidak disengaja saat dijeda.

Masalah Chromium: 40924951, 40133606

Sorotan lainnya

Kumpulan peningkatan penting di seluruh subsistem DevTools lainnya:

• Sumber: Buka Cepat kini memprioritaskan file ruang kerja lokal dengan peningkatan skor yang besar, sehingga file ruang kerja muncul di bagian atas di atas resource jaringan. (Masalah Chromium: 40260136)
• Memori: Tampilan Ringkasan Snapshot Heap kini menampilkan jumlah total objek bersama dengan ukuran dangkal yang diagregasi untuk jenis yang dipilih, dan menyertakan filter konteks eksekusi native. (Masalah Chromium: 497855658)
• Aplikasi: Panel Iklan memindahkan tombol Soroti iklan langsung ke panel, menambahkan ID Elemen iframe Iklan yang dapat diklik untuk menampilkan frame dalam hierarki, dan memperkenalkan tabel perincian metrik per frame. (Masalah Chromium: 514957134)
• Aplikasi: Mendesain ulang bagian Hapus data situs di panel Penyimpanan menjadi grup yang terpadu dan digabungkan (masalah Chromium: 375867286), dan menyelesaikan entri Penyimpanan Cache duplikat setelah pemulihan Back/Forward Cache (masalah Chromium: 484693244).
• Ekstensi: Metode asinkron di seluruh chrome.devtools.panels kini secara native menampilkan Promise JavaScript saat dipanggil tanpa callback. (Masalah Chromium: 496604551)
• Setelan: Memisahkan preset throttling jaringan default dan konfigurasi throttling kustom ke dalam bagian terpisah. (Masalah Chromium: 342409451)
• Lighthouse: Memperbarui modul Lighthouse bawaan ke versi 13.4.1. (Masalah Chromium: 40543651)
• Masalah: DevTools memunculkan peringatan saat gambar yang menggunakan loading="lazy" tidak memiliki dimensi width atau height yang eksplisit.
• Mode perangkat: Menyederhanakan menu tingkat zoom dengan opsi Muat ke jendela yang terpadu dan menonaktifkan tombol Tampilkan frame perangkat saat grafis frame tidak tersedia.

Peningkatan aksesibilitas

Chrome 152 menyertakan peningkatan aksesibilitas berikut:

• Elemen & Aksesibilitas: Menambahkan opsi menu konteks untuk beralih dengan lancar antara hierarki DOM Elemen dan Tampilan Hierarki Aksesibilitas, serta "Scroll ke tampilan" untuk node aksesibilitas. (Masalah Chromium: 417929842)
• Aksesibilitas: Menambahkan dukungan untuk menyalin node dan subpohon aksesibilitas sebagai teks biasa menggunakan menu konteks. (Masalah Chromium: 417929842)
• Elemen: Memperbaiki warna sorotan penelusuran dengan kontras rendah di panel Elemen saat berjalan dalam mode gelap. (Masalah Chromium: 491718898)
• Navigasi: Melepaskan DevTools ke jendela terpisah atau menyematkan kembali ke tab tidak lagi memfokuskan tombol menu utama.
• Setelan: Menambahkan konteks deskriptif yang dapat diakses ke tombol "Tampilkan Lebih Banyak" dan "Tampilkan Lebih Sedikit" di setelan AI.