Yang baru di DevTools (Chrome 145)

Matthias Rohmer

Dipublikasikan: 11 Februari 2026

Mirip dengan Chrome 139, untuk Chrome 145, tim Chrome DevTools memprioritaskan keunggulan produk, mengatasi masalah umum, menyatukan penerapan UI, dan meningkatkan kualitas pengujian. Berbagai perbaikan dan peningkatan kecil di berbagai panel yang dihasilkan dari upaya ini akan membuat alur kerja penelusuran bug dan pengembangan harian Anda menjadi lebih lancar, andal, dan produktif.

Update server MCP DevTools

Server MCP DevTools telah menerima update signifikan dari v0.11.0 hingga v0.14.0, yang memperkenalkan kemampuan otomatisasi dan emulasi utama.

  • Koneksi Otomatis: Flag --auto-connect baru memungkinkan server menemukan dan terhubung secara otomatis ke instance Chrome yang sedang berjalan, sehingga tidak perlu menyalin URL WebSocket secara manual.
  • Emulasi Terpadu: Alat emulate tunggal kini menangani geolokasi, kondisi jaringan (offline/3G lambat), pembatasan CPU, dan penggantian agen pengguna.
  • Log yang Dipertahankan: Anda kini dapat mengakses permintaan jaringan dan pesan konsol di seluruh navigasi, yang mencerminkan fungsi "Pertahankan Log" di DevTools.

Lihat log perubahan publik di GitHub untuk mengetahui daftar lengkap perubahan.

Navigasi Lembut kini terlihat di tampilan rekaman aktivitas

Penanda navigasi lembut dan LCP lembut kini terlihat di tampilan rekaman aktivitas panel Performa jika situs Anda menggunakan arsitektur Aplikasi Halaman Tunggal (SPA). Hal ini mempermudah proses men-debug performa di aplikasi web modern yang navigasinya terjadi tanpa memuat ulang halaman sepenuhnya.

Baca selengkapnya tentang navigasi ringan di postingan blog ini. Tampilan metrik langsung dan Insight Performa tidak mencerminkan navigasi ringan, tetapi pekerjaan tersebut direncanakan untuk rilis mendatang seiring berlanjutnya pekerjaan pada API ini.

Penanda nav lunak di panel Performa dengan rekaman aktivitas dari youtube.com.

Masalah Chromium: 450673886, 450673887

Waktu profiler tingkat baris kini jauh lebih presisi

Setelah merekam rekaman aktivitas di panel Performance, panel Sources menampilkan waktu yang diamati dalam rekaman aktivitas berdasarkan per baris. Dengan begitu, Anda dapat mengidentifikasi secara tepat baris kode mana yang paling banyak menggunakan waktu eksekusi.

Fitur ini sebelumnya memiliki bug yang membuatnya tidak dapat diandalkan saat sumbernya diformat dengan rapi (menggunakan tombol {}) atau saat menggunakan skrip yang dipetakan sumbernya. Masalah ini telah diselesaikan, sehingga pembuatan profil tingkat baris menjadi akurat dan dapat digunakan untuk kode yang siap produksi dan di-minify.

Waktu eksekusi di samping nomor baris di panel Sumber.

Interaksi pelacakan yang lebih cepat

Bottleneck utama di panel Performa telah diselesaikan. Sebelumnya, memilih rentang waktu atau menggeser melalui rekaman aktivitas yang padat dapat menyebabkan lag UI yang signifikan karena pengurutan peristiwa yang berlebihan. Hal ini telah dioptimalkan, sehingga interaksi dengan diagram flame yang kompleks menjadi jauh lebih responsif.

Masalah Chromium: 457866795

Mengidentifikasi resource yang memblokir render

Panel Network kini menyertakan kolom Render blocking khusus. Hal ini memungkinkan Anda langsung mengidentifikasi aset (JavaScript, CSS, dan font) yang mencegah browser merender konten halaman, sehingga membantu Anda mengoptimalkan performa First Paint.

Kolom Render blocking baru di panel jaringan.

Masalah Chromium: 41169154

Throttling permintaan jaringan individual

Panel Kondisi permintaan (sebelumnya Pemblokiran permintaan jaringan), yang diperkenalkan di Chrome 144, kini memiliki pembatasan permintaan individual yang diaktifkan secara default.

Meskipun fitur ini diperkenalkan pada tonggak pencapaian sebelumnya, fitur ini dinonaktifkan karena regresi yang terlambat. Di Chrome 145, Anda kini dapat membatasi permintaan jaringan tertentu secara andal untuk menyimulasikan dependensi yang lambat atau menguji cara aplikasi Anda menangani penundaan resource tertentu.

Buka panel dari ⋮ > Alat Lainnya > Kondisi Permintaan untuk mulai membatasi atau memblokir pola tertentu.

Peningkatan kualitas proses debug untuk @starting-style

Dukungan untuk men-debug aturan CSS @starting-style kini diaktifkan secara default. Fitur ini membantu Anda memeriksa gaya yang diterapkan saat elemen dirender pertama kali, yang penting untuk men-debug animasi dan transisi masuk.

Masalah Chromium: 465367572

Pembaruan Bantuan AI

  • Input Multimodal: Anda kini dapat menempelkan gambar langsung dari papan klip ke dalam chat Bantuan AI untuk mengajukan pertanyaan tentang masalah visual.

Masalah Chromium: 470997699

Sorotan lain-lain

  • Elemen: Badge Lihat sumber baru telah ditambahkan di samping tag <html> root, sehingga memberikan cara cepat untuk membuka kode sumber dokumen.
  • Sumber: File JSON yang dapat diedit kini mendukung tombol cetak rapi yang dapat dibalik, sehingga memudahkan pengeditan data tanpa kehilangan format aslinya.
  • Jaringan: Item menu konteks telah diperbarui untuk menggunakan huruf kapital di awal kalimat agar lebih mudah dibaca.
  • Konsol: Memperbaiki masalah saat filter untuk pengecualian yang tidak tertangkap hilang setelah memuat ulang halaman.

Masalah Chromium: 378870233, 461041921, 433162438

Pengumuman aksesibilitas

Versi ini menghadirkan peningkatan aksesibilitas berikut:

  • Penelusuran: Pembaca layar kini mengumumkan jumlah hasil penelusuran (misalnya, "1 dari 5") saat menggunakan Ctrl+F.
  • Perekam: Pembaca layar kini mengumumkan saat rekaman telah berhasil dihapus atau diimpor.
  • Setelan: Pembaca layar kini mengumumkan jumlah hasil saat memfilter di tab Eksperimen.
  • Privasi: Grup Origin di panel Privasi kini dapat diakses sepenuhnya menggunakan keyboard.
  • UI: Peningkatan visibilitas ikon dok dan elemen pilihan yang dinonaktifkan untuk pengguna dalam mode Kontras Tinggi dan Warna Paksa.

Masalah Chromium: 448675917, 392090449, 471713944, 471141907, 471095586