Yang baru di DevTools (Chrome 149)

Matthias Rohmer

Dipublikasikan: 2 Juni 2026

Chrome 149 menghadirkan upgrade besar pada bantuan AI, memperkenalkan alat debug WebMCP eksperimental di panel Aplikasi, dan memperluas dukungan penyelesaian kode ke CSS.

DevTools untuk agen

Server MCP dan CLI Chrome DevTools untuk agen kini resmi stabil. Baca pengumuman lengkapnya di sini.

Fitur utama dan alat baru yang ditambahkan hingga rilis v1.1.1 mencakup:

  • Alat pihak ketiga kustom yang ditampilkan di halaman: halaman kini dapat menentukan alat debug kustom melalui JavaScript, yang dapat ditemukan dan dipanggil oleh DevTools untuk agen.
  • Debug WebMCP: DevTools untuk agen kini dapat mencantumkan dan menjalankan alat WebMCP.
  • Emulasi header HTTP kustom: Menambahkan dukungan untuk header HTTP (seperti token Auth atau Agen Pengguna kustom) ke alat emulasi.

Alat pihak ketiga dan debug WebMCP masih eksperimental dan belum diaktifkan secara default. Lihat referensi alat untuk mengetahui info tentang alat WebMCP, pelajari lebih lanjut alat pihak ketiga dalam dokumentasi kami.

Untuk mengetahui update terbaru seputar DevTools untuk agen, dan untuk berkontribusi, buka repositori GitHub. Mulai gunakan dokumentasi kami atau ikuti sesi video Google I/O yang komprehensif untuk mengetahui informasi terbaru tentang cara Mengoptimalkan alur kerja coding AI Anda dengan Chrome DevTools untuk agen.

Bantuan AI

Panel Bantuan AI telah menerima update antarmuka pengguna yang signifikan dan alat baru untuk meningkatkan pengalaman percakapan dan memberikan insight halaman yang lebih mendalam:

  • Panduan agen: Bantuan AI kini merender widget langsung dalam antarmuka chat, bukan Markdown teks biasa. Widget ini mencakup Core Web Vitals dan insight terkait, elemen LCP, perincian LCP, aktivitas thread Bottom-up, dan lainnya. Link Reveal di dalam widget akan membawa Anda ke sumber informasi ini di dalam DevTools.
  • Salin ke agen coding: Percakapan kini diakhiri dengan tombol khusus untuk menyalin percakapan, baik yang diringkas sebagai perintah, atau percakapan verbatim, sehingga Anda dapat menempelkannya di agen coding pilihan Anda.
  • Kemampuan yang diupgrade: Bantuan AI kini memiliki akses ke Lighthouse dan insight terkait, sehingga dapat menganalisis halaman Anda secara holistik dan memberikan saran yang ditargetkan.
  • Respons yang ditingkatkan: Dengan menggunakan Gemini 3 di balik layar, dan pembukaan yang disempurnakan, bantuan AI memberikan jawaban yang lebih ringkas dan lebih dapat ditindaklanjuti.
  • Navigasi yang ditingkatkan: Anda kini dapat menavigasi perintah chat sebelumnya menggunakan tombol Panah Atas dan Panah Bawah, sehingga Anda dapat menyempurnakan atau menjalankan kembali kueri sebelumnya dengan cepat dan intuitif.
Bantuan AI dengan perintah "How can I improve the performance of this page?" di situs demo Astro.js DevTools Times, yang menampilkan Panduan agen, widget, dan Salin ke agen coding ke Antigravity.

Untuk mendukung Salin ke agen coding, kami akan menghentikan dukungan untuk perbaikan gaya otomatis melalui bantuan AI, dengan Chrome 152. Sampaikan pendapat Anda tentang rencana ini di bug masukan khusus

WebMCP

Rilis ini memperkenalkan alat debug WebMCP eksperimental di dalam sidebar panel Aplikasi. WebMCP (Web Model Context Protocol) memungkinkan halaman web mendaftarkan alat untuk digunakan oleh agen LLM yang mengunjungi halaman tersebut. Pelajari lebih lanjut standar yang diusulkan dalam dokumentasi kami.

Alat debug baru ini memungkinkan developer:

  • Memeriksa alat sisi klien dan skemanya.
  • Menjalankan eksekusi alat secara manual dengan parameter kustom.
  • Melacak dan memfilter peristiwa pemanggilan alat yang aktif atau tertunda.
  • Memantau status eksekusi dan memeriksa payload yang ditampilkan.

WebMCP adalah standar web yang diusulkan dalam pratinjau awal. Aktifkan flag #devtools-webmcp-support dan #enable-webmcp-testing di chrome://flags untuk mulai bereksperimen.

Alat proses debug WebMCP baru di panel Aplikasi DevTools.
Alat debug WebMCP baru yang memeriksa situs demo L'Atelier, yang menampilkan pemanggilan alat sebelumnya, alat yang tersedia, dan opsi filter.

Masalah Chromium: 494516094

Penyelesaian kode untuk CSS

Tab Styles kini menampilkan penyelesaian kode untuk CSS dengan Gemini, yang didasarkan pada dukungan untuk panel Konsol & Sumber. Aktifkan saran kode di Setelan > Inovasi AI > Saran kode.

Hal ini membantu Anda bereksperimen dengan kombinasi properti CSS yang lebih kompleks, seperti gradien atau bayangan kotak, tanpa harus mengingat sintaksisnya yang tepat. Atau untuk membuat tata letak petak dan fleksibel dengan cepat, yang mengandalkan beberapa properti terkait.

Toolbar di bagian bawah tab Styles menampilkan status melalui indikator lingkaran berputar. Saran akan diperbarui atau dihapus saat Anda mengetik, sehingga teks yang dihasilkan AI tetap relevan dengan pengeditan manual Anda.

Pedoman kontras warna APCA dipromosikan ke versi stabil

Kalkulator kontras Advanced Perceptual Contrast Algorithm (APCA) telah resmi keluar dari fase eksperimental dan kini tersedia sebagai setelan preferensi standar. APCA menggantikan pedoman kontras AAA/AA lama dengan model kontras perseptual modern yang dioptimalkan untuk rendering teks dan tampilan modern.

Anda kini dapat mengaktifkan atau menonaktifkan pedoman APCA menggunakan kotak centang yang terletak di bagian Setelan > Preferensi > Elemen > Aktifkan pedoman kontras APCA.

Tombol algoritma APCA di setelan DevTools dan algoritma baru yang berlaku di tab Styles.
Tombol algoritma APCA di setelan DevTools dan algoritma baru yang berlaku di tab Styles.

Agen pengguna Mode Perangkat Dinamis

Mode perangkat Responsif sebelumnya menggunakan string Agen Pengguna yang dikodekan secara permanen (Android 6.0; Nexus 5). Hal ini menyebabkan situs modern menurunkan kualitas fungsi atau memicu mode kompatibilitas karena OS yang dilaporkan dikenali sebagai OS yang berusia lebih dari satu dekade.

Agen pengguna yang dikodekan secara permanen telah diganti dengan heuristik dinamis yang otomatis diperbarui berdasarkan tahun kalender saat ini, sehingga DevTools selalu melaporkan lingkungan modern yang masuk akal tanpa memerlukan pemeliharaan manual.

Sorotan lainnya

Kumpulan peningkatan dan perbaikan bug yang lebih kecil dalam rilis ini:

  • Konsol: Menambahkan tombol pengalih Ciutkan / Perluas semua ke toolbar panel Konsol untuk menciutkan atau memperluas semua grup konsol dan pelacakan tumpukan yang aktif secara bersamaan dengan cepat. (427657550)
  • Aplikasi: Hyperlink yang dapat diklik telah menggantikan teks statis untuk kolom bucket penyimpanan di tampilan metadata Aplikasi. Mengklik link bucket akan otomatis membuka dan menandai bucket tertentu di panel sidebar Bucket Penyimpanan. (435311130)
  • Aplikasi: Mengaktifkan kembali dukungan pemeriksaan penyimpanan penuh untuk Service Worker setelah menyelesaikan regresi error. (406991275, 466134219)
  • Aplikasi: Menambahkan dukungan untuk memeriksa form_submission peristiwa pra-rendering dalam panel Pemuatan Awal. (346555939, 488078903)
  • Aplikasi: Menerapkan pengelolaan Kredensial Sesi Terikat Perangkat (DBSC) yang memungkinkan developer menghapus atau menghapus sesi aktif dari menu konteks atau dengan menekan tombol Delete atau Backspace. (471017387)
  • Elemen: Sorotan pada node DOM yang mewakili masalah tersembunyi di panel Masalah kini diperbarui secara dinamis (muncul atau menghilang) sebagai respons terhadap tindakan filter masalah. (40272723)
  • Jaringan: Peristiwa yang Dikirim Server (SSE) kini sepenuhnya diserialisasi dan disertakan dalam ekspor HAR, sehingga memungkinkan pengambilan streaming peristiwa langsung yang sedang berlangsung disimpan dan diimpor kembali ke DevTools. (494294071)
  • Performa: Memperbaiki pelacakan Core Web Vitals dalam tampilan Metrik Langsung untuk menyematkan pelacakan secara ketat ke konteks eksekusi frame utama, sehingga mencegah churn iframe dinamis mereset metrik. (494350655)
  • Performa: Mengupgrade web-vitals ke v5.2.0, yang memperkenalkan perbaikan upstream native untuk kebocoran memori selama pemantauan INP. (484342204)