Men-debug permintaan jaringan, file sumber, dan rekaman aktivitas performa dengan Gemini
Selain gaya CSS, Anda kini dapat memulai percakapan dengan Gemini tentang permintaan jaringan, file sumber, dan rekaman aktivitas performa.
Mirip dengan menu konteks di panel Elements, untuk membuka panel AI assistance dan memulai percakapan dengan Gemini, klik kanan dan pilih Ask AI atau klik tombol Ask AI di samping:
- Permintaan jaringan di panel Network.
- File di tab Sumber > Halaman.
- Aktivitas di jalur Performa > Utama.
Gemini akan mempertimbangkan konteks permintaan, file, atau aktivitas yang dipilih.
Tim DevTools menantikan masukan Anda di crbug.com/364805393.
Histori chat AI
Anda kini dapat memulihkan dan melihat percakapan lama dengan Gemini di panel Bantuan AI dengan mengklik tombol Percakapan baru di pojok kiri atas panel atau dengan menggunakan tombol Tanya AI dan opsi menu di panel Jaringan, tab Sumber > Halaman, dan tab Performa > Main.
Untuk melihat salah satu percakapan Anda sebelumnya, pilih perintah yang sesuai dari menu drop-down di bawah tombol Histori. Panel Bantuan AI akan mengingat histori chat Anda saat DevTools terbuka.
Mengelola penyimpanan ekstensi di Aplikasi > Penyimpanan
Mirip dengan penyimpanan lokal dan sesi, Anda kini dapat melihat dan mengubah entri penyimpanan ekstensi di bagian Aplikasi > Penyimpanan.
Masalah Chromium: crbug.com/40963428.
Peningkatan performa
Versi ini menghadirkan sejumlah peningkatan pada panel Performa.
Fase interaksi dalam metrik live
Anda kini dapat meluaskan interaksi dalam metrik live performa untuk melihat perincian fase dan waktunya.
Seperti yang dikomunikasikan dalam Ekstensi Web Vitals, kini di DevTools, rilis fitur ini menandai akhir dukungan untuk ekstensi Web Vitals.
Masalah Chromium: crbug.com/369097528.
Informasi pemblokiran rendering di tab Ringkasan
Saat Anda memilih permintaan jaringan yang ditandai dengan segitiga merah di jalur Performance > Network, tab Summary, selain tooltip (yang difaktorkan ulang), kini juga memberi tahu Anda bahwa permintaan tersebut memblokir rendering.
Dukungan untuk peristiwa scheduler.postTask dan panah pemicunya
Jalur Performa > Utama kini menampilkan peristiwa scheduler.postTask() dan panah inisiasi berikut di antaranya:
Schedule postTask->Fire postTaskSchedule postTask->Abort postTask
Masalah Chromium: crbug.com/40775984.
Peningkatan panel Animasi dan tab Elemen > Gaya
Versi ini menghadirkan beberapa peningkatan pada panel Animations dan tab Elements > Styles.
Beralih dari Elemen > Gaya ke Animasi
Tab Elements > Styles kini menempatkan ikon Jump to Animations panel animation di samping nilai properti animation, sehingga Anda dapat dengan mudah memeriksa animasi di sana.
Pembaruan real-time di tab Computed
Tab Elemen > Dihitung kini memperbarui nilai yang dihitung secara real-time saat, misalnya, animasi memperbaruinya.
Menghitung emulasi tekanan di Sensor
Panel Sensor kini memungkinkan Anda mengemulasi tekanan CPU Nominal, Fair, Serious, dan Critical.
Masalah Chromium: crbug.com/362277525.
Objek JS dengan nama yang sama dikelompokkan menurut sumber di panel Memori
Panel Memory kini membedakan antara objek JS dengan nama yang sama yang berasal dari sumber berbeda dan mengelompokkannya dengan tepat.
Masalah Chromium: crbug.com/357902505.
Tampilan baru untuk setelan
Untuk menyelaraskan desain antarmuka pengguna dengan lebih baik, setelan DevTools kini memiliki tampilan yang lebih mirip dengan setelan Chrome. Khususnya, bagian kini dipisahkan secara visual menjadi "kartu".
Panel insight performa tidak digunakan lagi dan dihapus dari DevTools
Semua fitur penting dan berguna dari panel Insight performa kini telah menemukan tempat baru di panel Performa, khususnya di metrik aktif, tab sidebar Insight, dan jalur Perpindahan tata letak. Oleh karena itu, versi ini menghentikan penggunaan dan menghapus panel Insight performa dari DevTools.
Tim DevTools berterima kasih atas masukan yang Anda berikan terkait penghentian penggunaan panel ini dan pengalaman keseluruhan dalam men-debug performa. Seperti biasa, kami ingin mendengar pendapat Anda dan mempelajari perspektif Anda. Terus kirimkan!
Sorotan lain-lain
Berikut beberapa perbaikan dan peningkatan penting dalam rilis ini:
- Performa:
- Menghapus batas 3 karakter yang tidak perlu untuk kueri penelusuran.
- Menambahkan tombol Beranda yang akan mengembalikan Anda ke layar metrik aktif.
- Memperbaiki pintasan zoom rekaman aktivitas Shift+S/W yang sebelumnya rusak.
- Elemen > Gaya:
- Menambahkan anchor-center ke pelengkapan otomatis 341991541.
- Memperbaiki bug yang menyebabkan editor flexbox tidak tersedia untuk nilai 2 kata 341964645.
- Jaringan: Kegagalan pengambilan data kini berupa peringatan kuning, bukan error merah, untuk menunjukkan bahwa tampilan konten tidak terpengaruh 372055494.
Mendownload 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.
Yang baru di DevTools
Daftar semua hal yang telah dibahas dalam seri Yang baru di DevTools.
- Memeriksa lebih banyak insight dengan Gemini
- Mengemulasi header 'Save-Data' di 'Network conditions'
- Melihat status Dasar di tooltip properti CSS
- Mengganti faktor bentuk di petunjuk klien agen pengguna
- Lighthouse 12.8.0
- Sorotan lain-lain
- Chrome DevTools yang lebih andal dan produktif
- Mengupload gambar dalam bantuan AI untuk penataan gaya
- Menambahkan header permintaan ke tabel di Jaringan
- Lihat sorotan dari Google I/O 2025
- Sorotan lain-lain
- Peningkatan panel performa
- Insight 'Hierarki dependensi jaringan' untuk origin yang dihubungkan sebelumnya
- Waktu respons dan pengalihan server dalam insight 'Latensi permintaan dokumen'
- Pengalihan di Ringkasan permintaan jaringan
- Mengurangi derau dalam rekaman aktivitas performa
- 'Nonaktifkan contoh JavaScript' tidak digunakan lagi
- Parameter akurasi geolokasi di Sensor
- Peningkatan panel elemen
- Men-debug nilai CSS yang kompleks dengan lebih mudah
- Dukungan@function di Elemen > Gaya
- Peningkatan panel Jaringan
- Filter has-request-header
- Direct Sockets di Aplikasi Web Terisolasi (IWA)
- Sorotan lain-lain
- Aksesibilitas
- Edisi Google I/O 2025
- Mengubah dan menyimpan perubahan CSS ke ruang kerja Anda dengan Gemini
- Menghubungkan folder ruang kerja dan menyimpan perubahan kembali ke file sumber Anda
- Bertanya kepada Gemini tentang insight performa
- Memberi anotasi pada temuan performa dengan Gemini
- Menambahkan screenshot ke percakapan Anda dengan Gemini
- Insight baru di panel Performa
- JavaScript Duplikat
- JavaScript Versi Lama
- Spekulasi kini mendukung tag aturan
- Lighthouse 12.6.0
- Sorotan lain-lain
- Aksesibilitas
- Peningkatan panel performa
- Insight performa baru
- Klik untuk menandai
- Waktu server di Ringkasan permintaan jaringan
- Memfilter cookie di 'Privasi dan keamanan'
- Ukuran dalam satuan kB di tabel di seluruh panel
- Pelengkapan otomatis mendukung corner-shape dan corner-*-shape di Elements > Styles
- Eksperimental: Menandai masalah pada elemen dan atribut di DOM
- Lighthouse 12.5.0
- Sorotan lain-lain
- Peningkatan panel performa
- Link origin dan skrip untuk panggilan profil dan fungsi di tab Performa
- Dukungan data kolom LCP menurut fase
- Insight hierarki dependensi jaringan
- Durasi, bukan total dan waktu mandiri di Ringkasan
- Penyorotan stack terberat
- Peningkatan status kosong untuk berbagai panel
- Tampilan hierarki aksesibilitas di Elemen
- Lighthouse 12.4.0
- Sorotan lain-lain
- Panel privasi dan keamanan
- Peningkatan panel performa
- Preset throttling CPU yang dikalibrasi
- Memilih peristiwa performa yang berbeda dalam percakapan AI yang sama
- Penyorotan pihak pertama dan ketiga di Performa
- Data kolom dalam tooltip dan insight penanda
- Insight perubahan tata letak yang dipaksa
- Insight'Optimalkan ukuran DOM'
- Memperluas rekaman aktivitas performa dengan console.timeStamp
- Peningkatan panel elemen
- Nilai real-time gaya animasi
- Dukungan untuk pseudo-class :open dan berbagai pseudo-element
- Menyalin semua pesan konsol
- Unit byte di panel Memori
- Sorotan lain-lain
- Histori chat AI yang persisten
- Peningkatan panel performa
- Insight penayangan gambar
- Navigasi keyboard klasik dan modern
- Mengabaikan skrip yang tidak relevan dalam flame chart
- Penanda linimasa dan penyorotan rentang saat mengarahkan kursor
- Setelan pembatasan yang direkomendasikan
- Penanda pengaturan waktu dalam overlay
- Pelacakan tumpukan panggilan JS di Ringkasan
- Setelan badge dipindahkan ke menu di Elemen
- Panel 'Yang baru' yang baru
- Lighthouse 12.3.0
- Sorotan lain-lain
- Men-debug permintaan jaringan, file sumber, dan rekaman aktivitas performa dengan Gemini
- Melihat histori chat AI
- Mengelola penyimpanan ekstensi di Aplikasi > Penyimpanan
- Peningkatan performa
- Fase interaksi dalam metrik aktif
- Informasi pemblokiran rendering di tab Ringkasan
- Dukungan untuk peristiwa scheduler.postTask dan panah inisiasinya
- Peningkatan panel Animasi dan tab Elemen > Gaya
- Beralih dari Elements > Styles ke Animations
- Update real-time di tab Dihitung
- Menghitung emulasi tekanan di Sensor
- Objek JS dengan nama yang sama dikelompokkan menurut sumber di panel Memory
- Tampilan baru untuk setelan
- Panel insight performa tidak digunakan lagi dan dihapus dari DevTools
- Sorotan lain-lain
- Men-debug CSS dengan Gemini
- Mengontrol fitur AI di tab setelan khusus
- Peningkatan panel performa
- Memberi anotasi dan membagikan temuan performa
- Mendapatkan insight performa langsung di panel Performa
- Lebih mudah mendeteksi pergeseran tata letak yang berlebihan
- Mendeteksi animasi yang tidak digabungkan
- Konkurensi hardware berpindah ke Sensor
- Abaikan skrip anonim dan fokus pada kode Anda dalam stack trace
- Elemen > Gaya: Dukungan untuk mode penulisan sideways-* untuk overlay petak dan kata kunci CSS-wide
- Audit Lighthouse untuk halaman non-HTTP dalam mode rentang waktu dan snapshot
- Peningkatan aksesibilitas
- Sorotan lain-lain
- Peningkatan panel Jaringan
- Filter jaringan yang didesain ulang
- Ekspor HAR kini mengecualikan data sensitif secara default
- Peningkatan panel elemen
- Nilai pelengkapan otomatis untuk properti text-emphasis-*
- Scroll overflow yang ditandai dengan badge
- Peningkatan panel performa
- Rekomendasi dalam metrik live
- Menavigasi breadcrumb
- Peningkatan panel memori
- Profil 'Elemen terpisah' baru
- Peningkatan penamaan objek JS biasa
- Menonaktifkan tema dinamis
- Eksperimen Chrome: Berbagi proses
- Lighthouse 12.2.1
- Sorotan lain-lain
- Perekam mendukung ekspor ke Puppeteer untuk Firefox
- Peningkatan panel performa
- Pengamatan metrik langsung
- Permintaan penelusuran di jalur Jaringan
- Melihat stack trace panggilan performance.mark dan performance.measure
- Menggunakan data alamat pengujian di panel Isi Otomatis
- Peningkatan panel elemen
- Memaksa status lainnya untuk elemen tertentu
- Elements > Styles kini melengkapi otomatis lebih banyak properti petak
- Lighthouse 12.2.0
- Sorotan lain-lain
- Insight konsol oleh Gemini akan tersedia di sebagian besar negara Eropa
- Pembaruan panel performa
- Jalur Jaringan yang Ditingkatkan
- Menyesuaikan data performa dengan API ekstensibilitas
- Detail di jalur Waktu
- Menyalin semua permintaan yang tercantum di panel Jaringan
- Snapshot heap yang lebih cepat dengan tag HTML bernama dan lebih sedikit kekacauan
- Membuka panel Animasi untuk merekam animasi dan mengedit @keyframes secara langsung
- Lighthouse 12.1.0
- Peningkatan aksesibilitas
- Sorotan lain-lain
- Memeriksa penempatan anchor CSS di panel Elements
- Peningkatan panel Sumber
- Peningkatan 'Jangan Pernah Jeda di Sini'
- Pemroses peristiwa baru untuk penyelarasan scroll
- Peningkatan panel Jaringan
- Preset pembatasan jaringan yang diperbarui
- Informasi pekerja layanan di kolom kustom format HAR
- Mengirim dan menerima peristiwa WebSocket di panel Performa
- Sorotan lain-lain
- Peningkatan panel performa
- Memindahkan dan menyembunyikan jalur dengan mode konfigurasi jalur yang diperbarui
- Mengabaikan skrip dalam flame chart
- Memperlambat CPU sebanyak 20 kali
- Panel insight performa tidak akan digunakan lagi
- Menemukan penggunaan memori yang berlebihan dengan filter baru dalam snapshot heap
- Memeriksa bucket penyimpanan di Aplikasi > Penyimpanan
- Menonaktifkan peringatan XSS mandiri dengan tanda command line
- Lighthouse 12.0.0
- Sorotan lain-lain
- Memahami error dan peringatan di Konsol dengan lebih baik menggunakan Gemini
- Dukungan aturan@position-try di Elemen > Gaya
- Peningkatan panel Sumber
- Mengonfigurasi pencetakan cantik otomatis dan penutupan tanda kurung
- Janji yang ditolak yang ditangani diakui sebagai yang tertangkap
- Penyebab error di Konsol
- Peningkatan panel Jaringan
- Memeriksa header Petunjuk Awal
- Menyembunyikan kolom Waterfall
- Peningkatan panel performa
- Merekam statistik pemilih CSS
- Mengubah urutan dan menyembunyikan trek
- Mengabaikan penahan di panel Memori
- Lighthouse 11.7.1
- Sorotan lain-lain
- Panel Isi Otomatis baru
- Pembatasan kecepatan jaringan yang ditingkatkan untuk WebRTC
- Dukungan animasi berbasis scroll di panel Animasi
- Peningkatan dukungan nesting CSS di Elemen > Gaya
- Panel Performa yang ditingkatkan
- Menyembunyikan fungsi dan turunannya dalam diagram flame
- Panah dari pemrakarsa yang dipilih ke peristiwa yang diprakarsainya
- Lighthouse 11.6.0
- Tooltip untuk kategori khusus di Memory > Heap snapshots
- Aplikasi > Pembaruan penyimpanan
- Byte yang digunakan untuk penyimpanan bersama
- Web SQL sepenuhnya tidak digunakan lagi
- Peningkatan panel cakupan
- Panel Lapisan mungkin tidak digunakan lagi
- Penghentian penggunaan JavaScript Profiler: Tahap empat, akhir