Yang baru di DevTools (Chrome 147)

Matthias Rohmer

Dipublikasikan: 7 April 2026

Chrome 147 memperkenalkan pemilihan konteks otomatis untuk bantuan AI, mengupgrade saran kode menjadi penyelesaian kode lengkap, memodernisasi toolbar Mode Perangkat, menghadirkan decoding otomatis isi jaringan yang dikompresi, dan beberapa peningkatan lainnya.

Pemilihan konteks otomatis dalam bantuan AI

Layar awal panel bantuan AI yang diperbarui.

Salah satu permintaan fitur teratas untuk bantuan AI adalah kemampuan untuk mengajukan lebih banyak pertanyaan terbuka. Agen pemilihan konteks baru kini memungkinkan Anda mengajukan pertanyaan tanpa memilih konteks sebelumnya, misalnya:

  • "Apa permintaan jaringan paling lambat di halaman ini?" Sebelumnya, hal ini tidak mungkin dilakukan karena Anda harus memilih permintaan jaringan tertentu.
  • "Apa saja masalah performa yang ada di halaman?" DevTools kini akan otomatis merekam rekaman aktivitas dengan setelan yang Anda pilih untuk menjawab pertanyaan ini.
  • "Bagaimana cara menggunakan panel animasi?" atau "Di mana setelan kontras tinggi di DevTools?", sehingga memberikan bantuan langsung terkait DevTools itu sendiri.

Sebagai bagian dari perubahan ini, bantuan AI kini juga dapat otomatis beralih konteks. Fitur ini akan memperbarui konteks secara cerdas berdasarkan tindakan Anda saat chat kosong, sekaligus menghormati pilihan manual Anda setelah percakapan dimulai.

DevTools untuk Agen

Server dan CLI MCP Chrome DevTools telah diupdate ke versi 0.21.0, yang menghadirkan peningkatan signifikan untuk alur kerja multi-agen, kemampuan audit baru melalui Lighthouse, dan serangkaian keterampilan yang ditingkatkan.

Fitur utama yang ditambahkan sejak update terakhir meliputi:

  • 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.
  • Kemampuan Deteksi Kebocoran Memori: Menambahkan kemampuan baru untuk mendeteksi kebocoran memori menggunakan alat take_memory_snapshot.
  • Peningkatan keterampilan aksesibilitas: Keterampilan proses debug aksesibilitas telah ditingkatkan untuk memanfaatkan Lighthouse dengan lebih baik dan memberikan output yang lebih andal.
  • Keterampilan penggunaan umum: Keterampilan khusus tentang cara menggunakan server MCP Chrome DevTools atau CLI, dan cara memecahkan masalah penginstalan membantu agen Anda memanfaatkan DevTools untuk agen secara maksimal.
  • Dukungan alur kerja multi-agen: Pengenalan perutean pageId memungkinkan beberapa agen menargetkan dan berinteraksi dengan halaman browser tertentu secara paralel.

Untuk mulai menggunakan fitur ini, lihat repositori GitHub dengan catatan rilis yang mendetail.

Pembuatan kode

Di Chrome 142, kami memperkenalkan saran kode dari Gemini di panel Konsol dan Sumber. Dengan Chrome 147, kemampuan ini ditingkatkan menjadi pembuatan kode lengkap.

Untuk membuat kode, ketik komentar bahasa alami yang menjelaskan logika yang Anda butuhkan (misalnya, // Loop to check all img elements for valid alt attributes), lalu tekan Cmd+I (Mac) atau Ctrl+I (Windows/Linux) untuk mulai membuat kode.

Toolbar Mode Perangkat yang diperbarui

Toolbar Mode Perangkat telah dimodernisasi untuk memberikan pengalaman yang lebih konsisten dan efisien:

  • Kontrol Standar: Pemilihan perangkat, tingkat zoom, dan Rasio Piksel Perangkat (DPR) kini menggunakan komponen UI DevTools standar, sehingga meningkatkan kegunaan.
  • Zoom yang Disederhanakan: Menu zoom kini lebih bersih, dengan opsi "Muat ke jendela" yang terintegrasi langsung ke dalam daftar persentase. "Sesuaikan zoom otomatis" telah dipindahkan ke tombol toolbar khusus.
  • Dukungan Kunci Orientasi: DevTools kini menangani API screen.orientation.lock() dalam emulasi perangkat. Saat halaman mengunci orientasi, perangkat yang diemulasi akan otomatis berputar agar sesuai dengan orientasi yang dikunci, dan tombol putar manual akan dinonaktifkan saat kunci aktif.

Masalah Chromium: 40807290

Isi terkompresi yang didekode

Mendiagnosis masalah dengan resource terkompresi kini jauh lebih mudah. Sebelumnya, jika permintaan HTTP menggunakan Content-Encoding: gzip atau deflate, tampilan Payload di panel Network akan menampilkan data biner yang tidak dapat dibaca, bukan konten yang didekode.

Di Chrome 147, DevTools otomatis mendekode isi yang dikompresi ini, menampilkan konten yang dapat dibaca langsung di bagian Payload.

Selain itu, daftar permintaan kini menyertakan informasi Ukuran Transfer, sehingga memberikan gambaran yang lebih jelas tentang penggunaan data melalui jaringan - detail yang juga digunakan oleh Asisten AI untuk memilih permintaan dengan lebih baik.

Masalah Chromium: 356158096

Filter ekspresi reguler untuk gaya

Filter ekspresi reguler baru di panel Gaya.

Sekarang Anda dapat menggunakan ekspresi reguler di kolom filter untuk panel Gaya, Dihitung, dan Properti. Klik tombol ekspresi Reguler baru (.*) untuk mengaktifkan. Kemudian, misalnya, ketik padding|border untuk menandai semua properti padding dan border.

Masalah Chromium: 40706727

Peningkatan pemuatan spekulatif

Proses men-debug pemuatan awal lebih andal dengan fitur baru di panel Application > Speculative loads:

  • Pemfilteran Teks: Anda kini dapat memfilter daftar aturan dan percobaan menggunakan teks bebas atau filter yang diketik (misalnya, url:, action:, status:), dengan dukungan untuk logika AND di antara beberapa istilah.
  • Tombol Hapus: Tombol hapus baru memungkinkan Anda mereset model pra-pemuatan dan menghapus aturan serta upaya yang ditampilkan.
  • Kode Status HTTP: Untuk pengambilan data yang gagal, DevTools kini menampilkan kode status HTTP yang sebenarnya (misalnya, 404) di kolom status dan panel detail, bukan pesan kegagalan umum.

Masalah Chromium: 479524246, 40926909

Lain-lain

Berikut adalah beberapa perbaikan dan fitur penting dalam rilis ini:

  • Konsol: Jika semua frame stack inline error masuk dalam daftar yang diabaikan, tetapi stack panggilan berisi frame yang tidak diabaikan, tombol kini muncul untuk membantu Anda berfokus pada kode yang dapat ditindaklanjuti sambil menyembunyikan rekaman aktivitas library yang mengganggu (379788109).
  • Performa: Status sidebar (terbuka/tertutup) kini dipertahankan; jika Anda menutup sidebar, sidebar akan tetap tertutup di seluruh rekaman berikutnya (437340219).
  • Setelan: DevTools kini dapat meminta Anda untuk memulai ulang browser melalui infobar saat mengaktifkan/menonaktifkan setelan eksperimental tertentu.
  • Pemeriksaan Objek: Opsi menu konteks "Tampilkan semua" baru di tampilan objek memungkinkan Anda mengalihkan visibilitas properti nullish (null atau undefined) (41187256).
  • Elemen: Penghias "iklan" tidak lagi dibatasi untuk iframe dan kini dapat ditampilkan untuk elemen arbitrer yang diberi tag terkait iklan oleh backend (485493202).
  • Node petunjuk: Node Petunjuk pemrosesan (seperti <?xml-stylesheet ... ?>) kini dapat dilihat dan diedit di hierarki DOM (484891675)

Aksesibilitas

Rilis ini menghadirkan beberapa peningkatan aksesibilitas:

  • Performa: Tombol bantuan judul di kartu metrik performa kini selalu terlihat dan dapat diakses dengan keyboard, bukan hanya muncul saat kursor diarahkan ke tombol (487613506).
  • Sumber: Titik henti sementara pemroses peristiwa kini dapat dicentang atau tidak dicentang menggunakan tombol Spasi (478890182).
  • Setelan: Tombol Home dan End kini berfungsi untuk membuka item pertama dan terakhir dari daftar pintasan (481747256).
  • Lighthouse: Peningkatan pengumuman pembaca layar untuk kotak centang grup kategori (477643909).