Yang baru di DevTools - Oktober 2026

Matthias Rohmer

Dipublikasikan: 1 Oktober 2026

Chrome 153 dan Chrome 154 diluncurkan ke versi stabil selama sebulan terakhir, menghadirkan serangkaian peningkatan untuk developer yang siap digunakan dalam alur kerja sehari-hari Anda. Edisi ini menyoroti kontrol eksekusi JavaScript terperinci di DevTools untuk agen, pelacakan skrip iklan di panel Aplikasi, dukungan navigasi lembut penuh dan penggantian tingkatan performa CPU di panel Performa, dukungan untuk gaya tidak aktif dan hiasan yang dapat diakses keyboard di panel Elemen, pemeriksaan sumber dan perekaman rekaman aktivitas performa dalam bantuan AI, serta preset perangkat yang dimodernisasi di Mode Perangkat.

DevTools untuk agen

Server MCP Chrome DevTools memperkenalkan kontrol keamanan baru, penyesuaian performa, dan kemampuan analisis memori untuk agen coding:

  • Paket Plugin Agen 1.0: Menambahkan dukungan untuk paket Plugin Agen 1.0, yang memungkinkan agen memuat dan mengeksekusi ekstensi plugin modular.
  • Kontrol eksekusi JavaScript: Konfigurasi --no-javascript-evaluation atau nonaktifkan alat eksekusi JavaScript untuk memeriksa halaman tanpa mengevaluasi skrip, yang mencakup navigasi dan skrip inisialisasi.
  • Peta sumber on-demand: Menambahkan opsi untuk menonaktifkan peta sumber dan memuat peta sumber secara lambat sesuai permintaan, sehingga mencegah penggunaan memori yang tinggi di situs besar.
  • Izin jalur CLI dan root sistem file yang dapat dikonfigurasi: CLI kini menyertakan --allow-unrestricted-paths secara default dan mendukung root sistem file yang dapat dikonfigurasi.
  • Pemeriksaan snapshot heap: Buat kueri objek secara langsung menurut ukuran yang dipertahankan atau nama properti dengan query_heapsnapshot, lihat ukuran sendiri dan ukuran yang dipertahankan untuk tepi, dan periksa memori yang dipertahankan oleh konteks eksekusi V8.
  • Alat otomatisasi PWA: Menambahkan alat khusus untuk mengotomatiskan penginstalan Progressive Web App dan pemeriksaan siklus proses.
  • Pelacakan tumpukan konsol: Ambil pelacakan tumpukan opsional saat mencantumkan pesan konsol dengan list_console_messages.

Pelajari lebih lanjut di repositori chrome-devtools-mcp.

Setelah diperkenalkannya empat metrik iklan eksperimental untuk Laporan Pengalaman Pengguna Chrome (CrUX), sub-panel baru ini menjadi lokasi terpusat untuk men-debug dan mengoptimalkan informasi terkait iklan di seluruh halaman. Hal ini mencakup:

  • Dasbor untuk metrik eksperimental baru: Kepadatan iklan area tampilan, Jumlah iklan area tampilan, Total penggunaan CPU oleh iklan, Total penggunaan jaringan oleh iklan.
  • Segmentasi penggunaan CPU dan jaringan menurut elemen iklan
  • Tabel skrip iklan di frame utama.
  • Tombol yang menandai iklan di halaman.

Pelajari lebih lanjut metrik iklan baru di dokumentasi kami.

Tab Iklan panel Aplikasi menampilkan tabel Skrip iklan baru dan menampilkan skrip iklan di Sumber.
Tab Iklan panel Aplikasi yang menampilkan tabel Skrip iklan baru dan menampilkan skrip iklan di Sumber.

Masalah Chromium: 514957134, 512927903, 540469610

Panel Performa menawarkan pengukuran navigasi ringan end-to-end, penggantian kalibrasi hardware, dan penelusuran aktivitas yang lebih mendalam:

  • Dukungan navigasi ringan penuh: Setelah pengenalan dukungan navigasi ringan di tampilan metrik aktif dan rekaman aktivitas di Chrome 152, analisis navigasi ringan kini tersedia di Insight, sehingga melengkapi dukungan end-to-end penuh untuk mengukur navigasi ringan di panel Performa.
  • Penggantian tingkat performa CPU melalui CDP: DevTools kini mendukung konfigurasi, penghitungan, dan pengiriman penggantian tingkat performa CPU yang dikalibrasi melalui Chrome DevTools Protocol (Emulation.setCPUPerformanceOverride), sehingga memungkinkan pengujian performa yang dapat direproduksi di seluruh tingkat hardware.
  • Penelusuran jalur ekstensi dalam diagram flame: Menekan Ctrl+F dalam diagram flame panel Performa kini cocok dengan entri dalam jalur kustom yang didaftarkan menggunakan Extensibility API, menelusuri teks tooltip, properti, dan detail pengguna.
  • Visualisasi thread profil CPU: Diagram batang Performa kini merender thread yang hanya berisi sampel profil CPU, sehingga eksekusi di latar belakang seperti thread WebAssembly muncul dalam tampilan linimasa.
Alur kerja menyeluruh navigasi ringan di panel Performa.

Masalah Chromium: 449760252, 483092899, 540020488

Elemen: Gaya tidak aktif, penghias yang dapat diakses keyboard, dan perbaikan struktur hierarki

Memeriksa dan membuat CSS lebih cepat dan lebih mudah diakses di panel Elemen:

  • Dukungan gaya tidak aktif: DevTools kini dapat terus menampilkan aturan gaya yang sebelumnya cocok dengan elemen yang dipilih saat tidak lagi berlaku, dengan jelas membedakannya dengan indikator visual tidak aktif. Aktifkan gaya tidak aktif dan konfigurasi perilaku ciutnya di Setelan.
  • Penghias yang dapat diakses keyboard: Penghias interaktif di hierarki DOM, termasuk Lihat Sumber, Gaya Awal, Penyelarasan Scroll, dan Tampilkan, kini dapat difokuskan keyboard dan dapat diaktifkan menggunakan Enter atau Space.
  • Pengurutan ulang dengan tarik lalu lepas: Pengurutan ulang node DOM dengan menarik elemen di hierarki DOM kini berfungsi dengan andal di seluruh batas DOM bayangan, dengan indikator penempatan pelepasan yang jelas.
  • Pengalihan properti CSS yang lebih lancar: Mengalihkan kotak centang properti CSS di tab Gaya tidak lagi memicu pengecatan ulang UI duplikat atau kedipan visual.
Panel Elemen yang menampilkan aturan CSS yang tidak aktif.
Panel Elements yang menampilkan aturan CSS tidak aktif.

Masalah Chromium: 539424116, 554057179, 555088527, 548477554

Mode Perangkat: Preset perangkat modern yang dikelompokkan menurut faktor bentuk

Toolbar Mode Perangkat dan tampilan Setelan > Perangkat mengatur hardware yang diemulasi ke dalam kategori yang jelas:

  • Pengelompokan faktor bentuk: Perangkat yang di-emulator kini dikelompokkan ke dalam Seluler, Perangkat Lipat, Tablet & Desktop, dan Layar Smart.
  • Katalog hardware yang diperbarui: Menambahkan preset modern—termasuk iPhone 16, Pixel 9, Pixel 10, Galaxy Z Fold 6, iPad Pro 13", dan Nest Hub Max—sekaligus menghentikan definisi perangkat lama yang sudah usang.
Mode Perangkat menampilkan preset perangkat modern yang dikelompokkan menurut faktor bentuk.
Mode Perangkat yang menampilkan preset perangkat modern yang dikelompokkan menurut faktor bentuk.

Masalah Chromium: 526856234, 526857820

Jaringan: Mengedit dan mengirim ulang sebagai pengambilan di Konsol, dan keamanan penggantian lokal

Alur kerja pemeriksaan dan proses debug permintaan jaringan telah disederhanakan dan diamankan:

  • Edit dan kirim ulang sebagai pengambilan di Konsol: Memilih Edit dan kirim ulang sebagai pengambilan pada permintaan jaringan kini akan otomatis memfokuskan panel Konsol dengan ekspresi fetch() yang sudah ditempelkan ke dalam perintah, lengkap dengan komentar parameter dan link referensi ke permintaan asli.
  • Penguatan keamanan penggantian lokal: Panel Jaringan kini mencegah path traversal (%2E%2E) dalam penggantian lokal dan melarang pembuatan penggantian pada skema non-http(s) seperti data:, blob:, javascript:, dan about:.
  • Pelepasan tanda sisipan di Salin sebagai curl (cmd): Menyalin permintaan jaringan sebagai perintah curl untuk Windows cmd.exe kini melepaskan tanda kurung dan tanda petik terbalik, sehingga mencegah error sintaksis perintah saat ditempelkan ke shell alternatif.
  • Sinkronisasi kursor payload biner: Tab Payload mempertahankan posisi scroll dan kursor Anda saat beralih antara tampilan Hex, Base64, dan UTF-8.
Mengklik kanan permintaan jaringan dan memilih Edit dan kirim ulang sebagai pengambilan data, yang secara otomatis memfokuskan panel Konsol dengan ekspresi pengambilan data yang sudah ditempel dan siap diedit.
Mengklik kanan permintaan jaringan dan memilih Edit dan kirim ulang sebagai pengambilan, yang secara otomatis memfokuskan panel Konsol dengan ekspresi pengambilan yang sudah ditempel dan siap diedit.

Masalah Chromium: 40726969, 513843792, 513836026, 407750982

Memori: Pemfilteran tepi cuplikan heap, pengurutan ukuran, dan pembuatan kueri objek

Panel Memori menyediakan alat yang lebih terperinci untuk menganalisis snapshot heap:

  • Pengurutan dan pemfilteran tepi: Anda kini dapat memfilter tepi dalam snapshot heap menurut ukuran yang dipertahankan minimum dan mengecualikan nilai primitif (null, undefined, true, false) untuk berfokus pada referensi objek yang bermakna. Tepi dapat diurutkan berdasarkan ukuran yang dipertahankan, ukuran sendiri, atau nama.
  • Kueri objek langsung: DevTools mendukung kueri objek snapshot heap secara langsung berdasarkan nilai minimum ukuran yang dipertahankan atau nama properti, sehingga menyederhanakan penyelidikan kebocoran memori.
  • Analisis retensi konteks: Snapshot heap dapat menghitung dan melaporkan memori gabungan yang tetap aktif secara khusus oleh konteks eksekusi V8.
  • Penguraian cuplikan heap yang tangguh: File cuplikan heap yang tidak valid atau rusak kini menampilkan error yang jelas, bukan menyebabkan penguraian terhenti.

Masalah Chromium: 497855658

Peningkatan aksesibilitas

Chrome 153 dan Chrome 154 menyertakan peningkatan aksesibilitas berikut:

  • Elemen: VoiceOver di macOS kini mengumumkan perubahan status "diperluas" dan "diciutkan" melalui live region yang sopan saat menavigasi item hierarki DOM. (Masalah Chromium: 540028208)
  • Masalah: Memperbaiki pengumuman pembaca layar duplikat di penghitung Masalah, membaca ringkasan tunggal yang jelas dan menerapkan semantik non-tombol yang benar dalam panel Masalah. (Masalah Chromium: 536977880)
  • Elemen: Hiasan interaktif (Lihat Sumber, Gaya Awal, Penyelarasan Scroll, dan Tampilkan) dapat sepenuhnya difokuskan dan diaktifkan menggunakan keyboard. (Masalah Chromium: 554057179)
  • Wilayah aktif: Menambahkan AccessibilityAnnouncementRecordingView untuk merekam dan men-debug pengumuman live dan panggilan ariaNotify. (Masalah Chromium: 527462118)

Masalah Chromium: 540028208, 536977880, 554057179, 527462118