Yang baru di DevTools (Chrome 147)

Matthias Rohmer

Dipublikasikan: 7 April 2026

Chrome 147 memperkenalkan pemilihan konteks otomatis untuk bantuan AI, mengupgrade saran kode ke penyelesaian kode lengkap, memodernisasi toolbar Mode Perangkat, menghadirkan decoding otomatis isi jaringan terkompresi, 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 pertanyaan yang lebih terbuka. Agen pemilihan konteks baru kini memungkinkan Anda mengajukan pertanyaan tanpa konteks sebelumnya dipilih, misalnya:

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

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

DevTools untuk Agen

Server dan CLI Chrome DevTools MCP 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 mencakup:

  • Audit Lighthouse terintegrasi: Kini Anda dapat menjalankan audit Lighthouse langsung melalui MCP, yang memungkinkan pemeriksaan performa dan kualitas otomatis dalam alur kerja agen Anda.
  • Keterampilan Deteksi Kebocoran Memori: Menambahkan keterampilan baru untuk mendeteksi kebocoran memori menggunakan alat take_memory_snapshot.
  • Peningkatan keterampilan aksesibilitas: Keterampilan proses debug aksesibilitas telah disempurnakan untuk memanfaatkan Lighthouse dengan lebih baik dan memberikan output yang lebih kuat.
  • Keterampilan penggunaan umum: Keterampilan khusus untuk cara menggunakan server Chrome DevTools MCP atau CLI, dan cara memecahkan masalah penginstalan membantu agen Anda memaksimalkan DevTools untuk agen.
  • 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 mendetail.

Pembuatan kode

Di Chrome 142, kami memperkenalkan saran kode oleh 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) dan tekan Cmd+i (Mac) atau Ctrl+i (Windows/Linux) untuk mulai membuat. i dalam pintasan adalah huruf kecil.

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 "Fit to window" yang terintegrasi langsung ke dalam daftar persentase. "Auto-adjust zoom" telah dipindahkan ke tombol toolbar khusus.
  • Dukungan Kunci Orientasi: DevTools kini menangani screen.orientation.lock() API dalam emulasi perangkat. Saat halaman mengunci orientasi, perangkat yang diemulasi akan otomatis berputar agar sesuai dengan orientasi yang terkunci, 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 jelas, bukan konten yang didekode.

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

Selain itu, listing permintaan kini menyertakan informasi Transfer Size , yang memberikan gambaran yang lebih jelas tentang penggunaan data melalui kabel - 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.

Kini Anda dapat menggunakan ekspresi reguler di kolom filter untuk panel Styles, Computed, dan Properties. Klik tombol alih Ekspresi reguler baru (.*) untuk mengaktifkannya. Kemudian, misalnya, ketik padding|border untuk menandai semua padding dan border properti.

Masalah Chromium: 40706727

Peningkatan pemuatan spekulatif

Proses debug pemuatan awal lebih kuat dengan fitur baru di panel Application > Speculative loads:

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

Masalah Chromium: 479524246, 40926909

Lain-lain

Berikut beberapa perbaikan dan fitur penting dalam rilis ini:

  • Konsol: Jika semua frame tumpukan inline error berada dalam daftar yang diabaikan tetapi tumpukan panggilan berisi frame yang tidak diabaikan, tombol kini akan muncul untuk membantu Anda berfokus pada kode yang dapat ditindaklanjuti sambil menyembunyikan pelacakan library yang tidak relevan (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 info bar saat mengalihkan setelan eksperimental tertentu.
  • Pemeriksaan Objek: Opsi menu konteks "Tampilkan semua" baru dalam tampilan objek memungkinkan Anda mengalihkan visibilitas properti nullish (null atau undefined) (41187256).
  • Elemen: Adorner "ad" tidak lagi dibatasi untuk iframe dan kini dapat ditampilkan untuk elemen arbitrer yang ditandai sebagai terkait iklan oleh backend (485493202).
  • Node instruksi: Node Instruksi Pemrosesan (seperti <?xml-stylesheet ... ?>) kini terlihat dan dapat diedit di hierarki DOM (484891675)

Aksesibilitas

Rilis ini menghadirkan beberapa penyempurnaan aksesibilitas:

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