Yang baru di DevTools (Chrome 146)

Matthias Rohmer

Dipublikasikan: 10 Maret 2026

Chrome 146 menghadirkan dukungan yang ditingkatkan untuk Lembar Gaya yang Diadopsi di panel Elemen, meningkatkan kualitas navigasi histori Konsol secara signifikan, dan menyederhanakan alur kerja proses debug Privasi, bersama dengan berbagai perbaikan dan update kecil lainnya.

Pembaruan server MCP DevTools

Server MCP DevTools kini berada di versi 0.19.0, yang menghadirkan alat baru yang canggih, peningkatan efisiensi, dan kemampuan proses debug khusus:

  • Audit Lighthouse terintegrasi: Anda kini dapat menjalankan audit Lighthouse secara langsung melalui MCP, sehingga memungkinkan pemeriksaan kualitas dan performa otomatis dalam alur kerja agentik Anda.
  • Mode Ramping: Mode --slim baru kini tersedia, yang dirancang untuk mengoptimalkan deskripsi dan parameter alat guna menghemat token secara maksimal.
  • Keterampilan Debugging Baru: Menambahkan keterampilan khusus untuk mengaudit dan men-debug aksesibilitas, serta men-debug dan mengoptimalkan Largest Contentful Paint (LCP).
  • Alat dan Kemampuan yang Diperluas: Server kini mendukung konteks browser yang terisolasi penyimpanan, perekaman screencast eksperimental, alat take_memory_snapshot baru, dan kemampuan interaksi lanjutan seperti type_text.

Lihat log perubahan publik di GitHub untuk mengetahui daftar lengkap perubahan.

Mempertahankan pengeditan histori Konsol

Hambatan yang sudah lama ada di Konsol telah diatasi. Sebelumnya, jika Anda mengedit perintah yang diambil dari histori dan keluar (dengan menekan Atas atau Bawah), hasil edit Anda akan hilang.

Di Chrome 146, DevTools kini mempertahankan hasil edit Anda saat Anda menjelajahi histori perintah Anda. Anda dapat mulai mengubah perintah sebelumnya, menjelajahi perintah lain, dan kembali ke draf tanpa kehilangan pekerjaan Anda.

Ini adalah kontribusi komunitas, terima kasih kepada @hjanuschka!

Masalah Chromium: 355108929

Peningkatan dukungan untuk Lembar Gaya yang Diadopsi

Proses men-debug Web Components dan arsitektur CSS modern kini jauh lebih mudah. Lembar Gaya yang Diadopsi tidak lagi disembunyikan; kini dikelompokkan di bawah node #adopted-style-sheets khusus dalam hierarki DOM di panel Elemen.

Anda dapat memeriksa sheet ini seperti tag <style> standar, dan bahkan mengedit aturannya langsung di panel Gaya. Hal ini menyamakan stylesheet yang dibuat dan gaya deklaratif, sehingga menyederhanakan proses debug Shadow DOM, komponen web, dan sistem desain bersama.

Stylesheet yang diterapkan di panel Elements dengan pengeditan inline.

Masalah Chromium: 476399197, 40802935

Dukungan tata letak petak padat

Editor Petak di panel Gaya kini mendukung algoritma pengemasan dense. Saat mengedit grid-auto-flow, Anda akan melihat kotak centang baru untuk kata kunci dense, sehingga Anda dapat beralih dengan cepat antara mode pengemasan standar dan padat langsung dari UI.

Kotak centang padat baru di editor petak.

Ini adalah kontribusi komunitas, terima kasih kepada @TheNourhan!

Masalah Chromium: 40791512

Penelusuran bug privasi yang disederhanakan

Panel Privasi dan Keamanan sebelumnya telah diganti namanya menjadi Keamanan, dan disederhanakan untuk mengurangi kekacauan UI dan menggabungkan alur kerja proses debug. Semua informasi terkait privasi, seperti masalah cookie pihak ketiga dan pemeriksaan potensi kerusakan, kini dilaporkan langsung di Konsol.

Perubahan ini berarti Anda tidak perlu lagi berpindah-pindah panel untuk mendiagnosis masalah privasi; masalah tersebut muncul bersama log dan error lainnya, sehingga memberikan konteks langsung.

Masalah Chromium: 473796598

Sorotan lain-lain

  • Sumber: Perombakan besar pada arsitektur stack trace menyelesaikan masalah saat peta sumber yang dimuat terlambat menyebabkan UI melompat atau beralih file secara tidak terduga.
  • Jaringan: Popover pemrakarsa kini menggunakan sistem rekaman aktivitas yang ditingkatkan untuk rantai permintaan yang lebih andal.

Pengumuman aksesibilitas

Versi ini menghadirkan peningkatan aksesibilitas berikut:

  • Perekam: Pembaca layar kini mengumumkan saat sidebar "Tampilkan Kode" diaktifkan.
  • Aplikasi: Judul laporan "Penyimpanan bersama", "Cache kembali/maju", dan "Mitigasi pelacakan rasio pentalan" yang baru kini diumumkan dengan benar sebagai judul.
  • Setelan: Dukungan mode kontras tinggi telah ditingkatkan untuk item pintasan dan tombol warna.
  • Umum: Peningkatan visibilitas fokus untuk berbagai elemen UI, termasuk panel Ringkasan CSS dan entri pemutar media.

Masalah Chromium: 479882111, 478888141, 479250362