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 meliputi:

  • Alat pihak ketiga kustom yang diekspos halaman: halaman kini dapat menentukan alat debug kustom melalui JavaScript, yang dapat ditemukan dan dipanggil oleh DevTools untuk agen.
  • Pen-debug WebMCP: DevTools untuk agen kini dapat mencantumkan dan mengeksekusi 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 proses debug WebMCP masih bersifat eksperimental dan belum diaktifkan secara default. Lihat referensi alat untuk mengetahui info tentang cara menggunakannya. Kami akan memberikan dokumentasi selengkapnya di developer.chrome.com setelah fitur tersebut siap digunakan dalam produksi.

Untuk mengetahui info terbaru seputar DevTools untuk agen, dan untuk berkontribusi, buka repositori GitHub. Mulai dengan dokumentasi kami atau pelajari sesi video Google I/O yang komprehensif Supercharge your AI coding workflow with Chrome DevTools for agents.

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 Tampilkan 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 kata demi kata, agar Anda dapat menempelkannya di agen coding pilihan Anda.
  • Kemampuan yang ditingkatkan: Bantuan AI kini memiliki akses ke Lighthouse dan insight terkait, sehingga dapat menganalisis halaman Anda secara holistik dan memberikan saran yang ditargetkan.
  • Respons yang lebih baik: Dengan menggunakan Gemini 3 di balik layar, dan kata pengantar yang lebih baik, 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 memperbaiki atau menjalankan kembali kueri sebelumnya dengan cepat dan intuitif.
Bantuan AI dengan perintah "Bagaimana cara meningkatkan performa halaman ini?" di situs demo Astro.js DevTools Times, yang menampilkan panduan Agen, widget, dan Salin ke agen coding ke Antigravity.

Beri tahu kami pendapat Anda dengan mengomentari bug masukan khusus. Untuk mendukung fitur Salin ke agen coding, kami akan menghentikan dukungan untuk perbaikan gaya otomatis melalui bantuan AI, dengan Chrome 152.

WebMCP

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

Alat proses debug baru memungkinkan developer:

  • Periksa alat sisi klien dan skemanya.
  • Menjalankan eksekusi alat secara manual dengan parameter kustom.
  • Lacak dan filter peristiwa pemanggilan alat yang aktif atau tertunda.
  • Pantau status eksekusi dan periksa payload yang ditampilkan.

WebMCP adalah standar web yang diusulkan dalam pratinjau awal. Aktifkan tanda #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 Gaya kini menampilkan penyelesaian kode untuk CSS dengan Gemini, yang dibangun berdasarkan 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 perlu mengingat sintaksisnya yang tepat. Atau untuk membuat tata letak petak dan fleksibel dengan cepat, dengan mengandalkan beberapa properti terkait.

Toolbar di bagian bawah tab Gaya menampilkan status melalui indikator pemuatan. Saran diperbarui atau dihapus saat Anda mengetik, sehingga memastikan teks buatan AI tetap relevan dengan pengeditan manual Anda.

Pedoman kontras warna APCA dipromosikan menjadi stabil

Kalkulator kontras Algoritma Kontras Perseptual Lanjutan (APCA) telah resmi keluar dari fase eksperimentalnya dan kini tersedia sebagai setelan preferensi standar. APCA menggantikan pedoman kontras AAA/AA lama dengan model kontras perseptual modern yang dioptimalkan untuk tampilan dan rendering teks modern.

Anda kini dapat mengaktifkan atau menonaktifkan panduan APCA menggunakan kotak centang yang ada di Setelan > Preferensi > Elemen > Aktifkan panduan 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 sudah berusia lebih dari satu dekade.

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

Sorotan lainnya

Kumpulan peningkatan kecil dan perbaikan bug dalam rilis ini:

  • Konsol: Menambahkan tombol pengalih Ciutkan / Perluas semua ke toolbar panel Konsol untuk meluaskan atau menciutkan semua grup konsol aktif dan stack trace sekaligus. (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 tersebut 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 peristiwa pra-rendering form_submission 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 merepresentasikan 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 live yang sedang berlangsung disimpan dan diimpor ulang ke DevTools. (494294071)
  • Performa: Memperbaiki pelacakan Core Web Vitals di tampilan Metrik Langsung untuk menetapkan pelacakan secara ketat ke konteks eksekusi frame utama, sehingga mencegah perubahan 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)