Di Chrome 144, tim meluncurkan fitur yang sangat dinantikan ke server MCP Chrome DevTools, yaitu panel Kondisi permintaan baru dan peningkatan untuk men-debug font dan stylesheet yang diadopsi.
Dengan demikian, daftar fitur luar biasa yang kami luncurkan sepanjang tahun 2025 telah selesai. Ingin melihat apakah Anda melewatkan salah satunya? Kemudian, lihat ringkasan berikut atau jelajahi edisi sebelumnya dari Yang baru di DevTools.
Update server MCP DevTools
Kami telah menerapkan berbagai perbaikan untuk server MCP DevTools dan merilis v0.12.1. Versi ini memperkenalkan fitur baru utama, yaitu koneksi otomatis, yang memungkinkan Anda menggunakan kembali sesi browser yang ada. Dengan koneksi otomatis, Anda dapat mulai melakukan proses debug sendiri di Chrome, lalu mengarahkan MCP DevTools ke instance Chrome yang sama untuk melanjutkan pekerjaan dari titik terakhir Anda.
Pelajari lebih lanjut koneksi otomatis untuk MCP DevTools di postingan blog terkait. Lihat log perubahan publik di GitHub untuk mengetahui daftar lengkap perubahan dan perbaikan bug.
Throttling permintaan jaringan individual
Panel Pemblokiran permintaan jaringan telah diganti namanya menjadi Kondisi permintaan. Selain memblokir permintaan, panel ini kini juga memungkinkan Anda membatasi kecepatan setiap permintaan.
Buka panel dari ⋮ > Alat Lainnya > Kondisi Permintaan. Aktifkan kotak centang Aktifkan pemblokiran dan throttling untuk mengaktifkan pemblokiran permintaan. Klik tombol + untuk menambahkan pola teks baru. Klik ikon untuk menghapus semua aturan.
Pelajari cara membatasi permintaan jaringan individual di dokumen yang diperbarui.
Mengedit aturan @font-face dan @font-feature-values
@font-face dan @font-feature-values kini ditampilkan di panel Gaya
dan dapat diedit dari sana.
Stylesheet yang diadopsi di panel Elemen
Panel Elements kini menampilkan stylesheet yang diadopsi di bawah root shadow dan root dokumen. Hal ini memudahkan mereka yang menggunakan stylesheet buatan untuk menemukan stylesheet yang memengaruhi elemen mereka dan men-debug gaya, terutama saat gaya tidak diterapkan secara tidak terduga.
Yang baru di DevTools 2025
Inovasi AI
Dimulai dengan Insight konsol, inovasi AI kini telah menjadi bagian integral dari Chrome DevTools dengan panel Bantuan AI sebagai hub utama untuk proses debug yang dibantu AI dan sadar konteks. Dengan Saran kode di panel Konsol dan Sumber serta anotasi otomatis dari Gemini dalam rekaman aktivitas Performa, DevTools menawarkan serangkaian alat komprehensif yang didukung AI untuk menyederhanakan alur kerja Anda.
- Perbaikan gaya penulisan end-to-end: Minta Gemini untuk memperbaiki masalah CSS dan, bersama dengan Ruang Kerja, simpan perubahan tersebut langsung kembali ke file sumber Anda di disk.
- Tanyakan tentang performa: Anda kini dapat mendiskusikan rekaman aktivitas performa lengkap dengan bantuan AI, atau mempelajari secara mendalam insight Performa apa pun, atau menggunakan Gemini untuk memberi anotasi pada rekaman aktivitas.
- Pen-debug-an visual: Panel bantuan AI menjadi multimodal, sehingga Anda dapat mengupload gambar atau mengambil screenshot untuk membantu Gemini memahami dan membantu Anda men-debug gangguan visual.
Performa
Kami mendesain ulang panel Performa untuk membuat proses pen-debug-an performa tidak terlalu rumit dan lebih mudah ditindaklanjuti. Misalnya, rekaman aktivitas kini dilengkapi dengan insight pilihan yang membantu Anda mengidentifikasi hambatan lebih cepat dan menjelajahi rekaman aktivitas lebih cepat. Peningkatan lainnya meliputi:
- Insight yang dapat ditindaklanjuti: Kami memperkenalkan serangkaian Insight Performa yang andal, yang mengidentifikasi masalah tertentu seperti LCP menurut fase, Penyebab pergeseran tata letak, dan Latensi permintaan dokumen.
- Konteks dunia nyata: Kami mengintegrasikan Data lapangan dan Data CrUX langsung ke panel Performa, sehingga Anda dapat memvalidasi hasil lab terhadap pengalaman pengguna sebenarnya.
- Konteks framework: Angular v20 dan React v19.2 kini menggunakan Extensibility API. Memahami hambatan thread utama menjadi lebih mudah dengan tampilan langsung hierarki komponen. Kami berterima kasih atas kemitraan kami dengan tim Angular dan React.
- Kolaborasi yang lebih baik: Berbagi rekaman aktivitas menjadi lebih mudah dengan kemampuan untuk menganotasi rekaman aktivitas dan opsi untuk mengekspor konten resource dan peta sumber, sehingga rekan kerja atau diri Anda di masa mendatang memiliki semua konteks yang mereka butuhkan.
Platform Web
DevTools terus mengikuti perkembangan platform web, dengan menambahkan alat khusus untuk spesifikasi CSS terbaru sekaligus meningkatkan pengalaman developer untuk fitur yang sudah ada.
Kami menambahkan pelacakan mendalam untuk rantai variabel CSS yang kompleks, ketersediaan Baseline ke tooltip properti, dan baru-baru ini memperkenalkan dukungan penelusuran bug untuk animasi entri yang kompleks menggunakan aturan @starting-style dan editor visual untuk tata letak display: masonry baru.
Download saluran pratinjau
Pertimbangkan untuk menggunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs sebelum pengguna Anda menemukannya.
Menghubungi tim Chrome DevTools
Gunakan opsi berikut untuk mendiskusikan fitur baru, update, atau hal lain yang terkait dengan DevTools.
- Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
- Laporkan masalah DevTools menggunakan Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
- Tweet di @ChromeDevTools.
- Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.