Yang baru di DevTools - November 2026

Matthias Rohmer

Dipublikasikan: 20 Oktober 2026

Chrome 155 dan Chrome 156 diluncurkan ke versi stabil pada bulan Oktober, sehingga menghadirkan serangkaian kemampuan proses debug dan penulisan baru ke browser Anda pada bulan November: pemeriksaan gaya CSS di DevTools untuk agen, editor position-area interaktif untuk pemosisian anchor CSS di Elemen, serta manifes Penginstalan Web dan diagnostik asal iklan di Aplikasi. Anda juga dapat mendeteksi variabel konteks yang tidak aktif di Memori, memeriksa peringatan pramuat Early Hints dan penggantian persisten di Jaringan, serta menavigasi linimasa dengan lebih lancar di Performa.

Memilih region petak anchor di editor area posisi visual di tab Gaya panel Elemen di samping overlay pemosisian anchor.
Memilih region petak anchor di editor area posisi visual di tab Styles panel Elements di samping overlay pemosisian anchor.

DevTools untuk agen

Server MCP Chrome DevTools menambahkan pemeriksaan gaya CSS, dukungan file konfigurasi, dan penguraian trace yang dipotong-potong untuk agen coding:

  • Pemeriksaan gaya CSS: Periksa gaya yang dihitung dan dicocokkan dengan alat get_css_styles, yang mendukung penomoran halaman (pageSize dan pageIdx) serta memformat aturan yang cocok, aturan yang diwariskan, elemen pseudo, aturan @keyframes, dan @ (@position-try, @property, dan @function).
  • Kontrol jalur dan file konfigurasi: Kelola flag server dengan file konfigurasi khusus, konfigurasi root sistem file kustom, dan gunakan --allow-unrestricted-paths secara default di CLI.
  • Penguraian buffer rekaman aktivitas yang dipotong-potong: Mengurai rekaman performa yang besar dengan parser buffer rekaman aktivitas yang dipotong-potong dan buffer rekaman aktivitas default sebesar 1,2 GB. DevTools juga mencakup instance mesin rekaman aktivitas per penguraian untuk mencegah kebocoran memori.
  • Penanganan dialog dan persistensi konsol: Menangani dialog JavaScript yang dipicu selama tindakan Input Tools secara otomatis, dan mempertahankan histori pesan konsol di seluruh navigasi dokumen yang sama.
  • Pembaruan menu: Klik Dapatkan Chrome DevTools untuk agen di menu utama DevTools untuk membuka petunjuk penyiapan.

Pelajari lebih lanjut di repositori chrome-devtools-mcp.

Elemen: Editor position-area visual, pemilihan anchor implisit, dan update penulisan CSS

Panel Elemen memperkenalkan alat visual untuk pemosisian anchor CSS dan memperluas pemeriksaan CSS:

  • Editor position-area visual: Klik contoh inline di samping deklarasi position-area di tab Styles untuk memilih region petak anchor secara visual, mengonfigurasi sumbu secara bersamaan atau satu per satu, mengalihkan kata kunci self, dan mempersingkat kata kunci tanpa sumbu.
  • Pemilihan anchor implisit pada adorner popover: Klik kanan adorner popover di hierarki DOM saat elemen memiliki beberapa anchor implisit untuk memeriksa dan beralih ke elemen anchor terkait.
  • Overlay kotak pemosisian anchor: Periksa margin, padding, batas, dan kotak konten blok penampung yang dimodifikasi inset (IMCB) langsung di overlay area pandang saat men-debug elemen yang diposisikan anchor.
  • wrap-reverse di editor Flexbox: Aktifkan/nonaktifkan flex-wrap: wrap-reverse langsung dari editor Flexbox visual di tab Styles.
  • Gaya CSS tidak aktif untuk @starting-style dan aturan yang diwariskan: Periksa aturan @starting-style yang tidak aktif dan bagian Inherited from dengan status perluasan dan penciutan manual yang dipertahankan di seluruh update.
  • Properti kustom multi-tanda hubung dan pelengkapan otomatis class: Periksa dan edit properti kustom CSS yang diawali dengan tiga tanda hubung atau lebih (seperti ---theme-color), dan filter class yang sudah diterapkan dari saran pelengkapan otomatis Add New Class.
Memilih elemen anchor implisit dari menu konteks adorner popover di hierarki DOM panel Elemen.
Memilih elemen anchor implisit dari menu konteks dekorator popover di hierarki DOM panel Elemen.

Masalah Chromium: 553335561, 438724570, 413061413, 397184392, 539424116, 533783988

Aplikasi: Diagnostik manifes Penginstalan Web, asal iklan, dan update tabel penyimpanan

Panel Application dan Issues menambahkan diagnostik untuk manifes Web Install, asal skrip iklan, dan pemeriksaan penyimpanan:

  • Diagnostik manifes Penginstalan Web: Periksa error manifes Penginstalan Web (navigator.install dan <install>) di panel Masalah—yang mencakup kegagalan pengambilan, error sintaksis, nilai start_url yang tidak valid, nama atau ID yang tidak ada, dan manifes yang tidak ada—dengan link langsung ke file manifes yang terpengaruh.
  • Dokumentasi kolom dan metrik asal iklan: Periksa kolom Asal iklan baru di bagian Iklan panel Aplikasi untuk melihat apakah skrip iklan cocok dengan rantai skrip ancestor atau aturan daftar filter, bersama dengan tooltip dokumentasi dan link Pelajari lebih lanjut tentang metrik iklan.
  • Ergonomi tabel IndexedDB dan Cookie: Luaskan objek bertingkat di petak data IndexedDB dengan tinggi baris dinamis yang mempertahankan posisi scroll, dan hapus baris yang dipilih di tabel Cookie menggunakan keyboard atau menu konteks.
Memeriksa kolom Asal iklan dan tooltip silsilah di bagian Iklan panel Aplikasi bersama dengan error manifes Penginstalan Web di panel samping Masalah.
Memeriksa kolom Sumber iklan dan tooltip silsilah di bagian Iklan panel Aplikasi bersama dengan error manifes Penginstalan Web di panel samping Masalah.

Masalah Chromium: 333795265, 553428200, 514957134, 555304817, 555304814, 562142155

Jaringan: Peringatan pramuat Petunjuk Awal dan penggantian persisten

Panel Jaringan menyempurnakan diagnostik Early Hints, penggantian lokal, dan alur kerja header kustom:

  • Peringatan pramuat Early Hints saat cache dinonaktifkan: Lihat peringatan di bagian header Early Hints saat respons 103 Early Hints menyertakan link pramuat saat Nonaktifkan cache aktif, yang menjelaskan alasan Chrome mengabaikan pramuat tersebut.
  • Penggantian lokal persisten dan kolom header kustom: Menayangkan penggantian isi respons lokal di seluruh navigasi halaman, mempertahankan konfigurasi kolom header permintaan dan header respons kustom serta tata urutan di seluruh pemuatan ulang, dan menyalin payload permintaan mentah yang dipotong dari menu konteks.
Memeriksa peringatan pramuat Petunjuk Awal di tab Header panel Jaringan dengan Nonaktifkan cache diaktifkan dan penggantian respons lokal aktif.
Memeriksa peringatan pramuat Early Hints di tab Headers panel Jaringan dengan Disable cache diaktifkan dan penggantian respons lokal aktif.

Masalah Chromium: 548701038, 559925510, 563542902, 556269542, 377410082

Memori: Deteksi kolom konteks mati dalam cuplikan heap

Panel Memori kini mendeteksi variabel closure yang tidak digunakan yang tetap dipertahankan dalam konteks eksekusi V8. DevTools mengurai metadata cakupan V8 yang disematkan dalam cuplikan heap untuk menghubungkan closure dengan objek Context bersama. Kemudian, alat ini akan menandai kolom konteks mati yang tetap aktif karena closure yang berjalan lama dan seinduk saat tidak ada closure aktif yang mengaksesnya, yang diurutkan berdasarkan dampak memori.

Memfilter cuplikan heap menurut Objek yang dipertahankan oleh konteks di panel Memori untuk memeriksa variabel konteks mati yang dipertahankan oleh konteks eksekusi V8 bersama.
Memfilter cuplikan heap menurut Objek yang dipertahankan oleh konteks di panel Memori untuk memeriksa variabel konteks mati yang dipertahankan oleh konteks eksekusi V8 bersama.

Masalah Chromium: 497855658

Performa: Navigasi linimasa yang lebih lancar dan status hierarki panggilan yang dipertahankan

Panel Performa memberikan navigasi flame chart yang lebih responsif dan mempertahankan konteks analisis Anda di seluruh panel:

  • Navigasi linimasa yang lebih lancar: Memperbesar, menggeser, dan menarik minimap linimasa tidak lagi mengalami lag.
  • Status Hierarki panggilan dan Bottom-up yang dipertahankan: Beralih antar-panel DevTools tanpa kehilangan node yang diperluas, pilihan, atau posisi scroll di tab Hierarki panggilan dan Bottom-up.
Memeriksa rentang minimap linimasa yang diperbesar dan node aktivitas JavaScript yang diperluas di tab Call tree panel Performance.
Memeriksa rentang minimap linimasa yang diperbesar dan node aktivitas JavaScript yang diperluas di tab Call tree panel Performance.

Masalah Chromium: 553831653, 561396590

Sorotan lainnya

Chrome 155 dan Chrome 156 juga menyertakan peningkatan berikut di seluruh panel DevTools:

  • Sensor: Ganti navigator.cpuPerformance langsung dari kontrol Tingkat Performa CPU baru di panel Sensor, atau biarkan mencerminkan preset throttling CPU aktif. (Masalah Chromium: 449760252, 526856234, 526857820)
  • Mode Perangkat: Pertahankan preferensi skala dan penyesuaian zoom otomatis per perangkat yang diemulasikan dan pertahankan penggantian Save-Data saat mengalihkan toolbar perangkat. (Masalah Chromium: 561306841, 555160483)
  • Pemilih Warna: Lihat saran warna kontras APCA untuk teks terang pada latar belakang gelap dan konversi warna di luar gamut ke oklab() dan oklch() tanpa nilai NaN. (Masalah Chromium: 560325669, 558821258)
  • Aksesibilitas: Identifikasi tombol filter ekspresi reguler yang aktif dengan titik indikator tanpa warna, dengarkan nama properti font yang diumumkan oleh pembaca layar di Ringkasan CSS, dan navigasikan dengan cincin fokus keyboard yang ditingkatkan dan visibilitas Kontras Tinggi di seluruh panel. (Masalah Chromium: 556764882, 555848535, 555599825, 553804654)
Mengganti Tingkat Performa CPU di panel Sensor serta memeriksa saran rasio kontras dan nilai oklch di Pemilih Warna.
Mengganti Tingkat Performa CPU di panel samping Sensor dan memeriksa saran rasio kontras serta nilai oklch di Pemilih Warna.

Masalah Chromium: 449760252, 526856234, 526857820, 561306841, 555160483, 560325669, 558821258, 556764882, 555848535, 555599825, 553804654