Peningkatan panel performa
Versi ini menghadirkan sejumlah peningkatan pada panel Performa.
Link asal dan skrip untuk panggilan profil dan fungsi di Performa
Tab Performa > Ringkasan kini menampilkan link ke skrip dan asal yang relevan untuk panggilan profil dan fungsi, sehingga Anda tidak perlu mengarahkan kursor ke peristiwa ini di jalur Utama.
Selain itu, jalur Network dan Main kini menampilkan nama pihak ketiga, jika ada, dalam tooltip saat Anda mengarahkan kursor ke peristiwa.
Masalah Chromium: 368541957.
Dukungan data kolom 'LCP menurut fase'
Dengan data lapangan diaktifkan, insight Performa > Insight > LCP menurut fase kini menampilkan waktu gambar persentil ke-75 dari Laporan UX Chrome dalam tabel tambahan, sehingga Anda dapat membandingkan waktu langsung di insight.
Insight 'Hierarki dependensi jaringan'
Tab Performa > Insight menambahkan insight Pohon dependensi jaringan baru ke koleksinya. Insight ini memberi tahu Anda jika Anda telah merangkai permintaan penting, yang tidak direkomendasikan. Arahkan kursor ke permintaan yang tercantum dalam insight untuk melihatnya disorot di jalur Network.
Untuk mempelajari lebih lanjut, lihat Hindari rantai permintaan penting.
Penyorotan stack terberat
Panel Performa kini menandai item di jalur Utama saat Anda mengarahkan kursor ke item tersebut di sidebar Call tree atau Bottom-up > Heaviest stack dan meredupkan item lainnya. Hal ini memungkinkan Anda menemukan item bertingkat secara visual di stack panggilan yang membutuhkan waktu paling lama.
Tampilan hierarki aksesibilitas di Elemen
Tampilan hierarki aksesibilitas dalam layar penuh kini diaktifkan secara default di panel Elemen.
Sebelumnya, Anda dapat menjelajahi hierarki aksesibilitas terpisah di tab Elemen > Aksesibilitas. Sekarang Anda dapat mengklik tombol Beralih ke tampilan Hierarki Aksesibilitas di sudut kanan atas hierarki DOM di panel Elemen untuk beralih bolak-balik antara hierarki DOM dan hierarki aksesibilitas halaman penuh, sehingga Anda dapat menjelajahi hierarki tersebut dan hubungannya dengan lebih mudah.
Pohon aksesibilitas memungkinkan Anda memeriksa cara teknologi pendukung melihat konten Anda dan menunjukkan atribut ARIA serta properti aksesibilitas yang dikomputasi dari node DOM. Untuk mempelajari lebih lanjut, lihat Pohon aksesibilitas lengkap di Chrome DevTools.
Masalah Chromium: 40808541.
Peningkatan status kosong untuk berbagai panel
Status kosong (saat tidak ada yang terbuka) untuk berbagai panel, bagian, dan tab telah disederhanakan untuk memberi tahu Anda secara tepat apa yang harus dilakukan untuk mulai menggunakannya. Beberapa status kosong, misalnya, di panel Network, kini memiliki tombol bantuan yang relevan seperti Reload page.
Opsi 'Tanya AI' dipindahkan ke bagian bawah menu
Opsi Tanya AI kini berada di bagian bawah menu drop-down, bukan di bagian atas.
Jangan ragu untuk memberikan masukan Anda di panel Bantuan AI di crbug.com/364805393.
Lighthouse 12.4.0
Panel Lighthouse kini menjalankan Lighthouse 12.4.0.
Versi ini menandai beberapa audit performa sebagai informatif dalam kondisi lulus, bukan menyembunyikannya di bagian audit yang lulus. Lihat daftar lengkap perubahan.
Untuk mempelajari dasar-dasar penggunaan panel Lighthouse di DevTools, lihat Lighthouse: Mengoptimalkan kecepatan situs.
Masalah Chromium: 40543651.
Sorotan lain-lain
Berikut beberapa perbaikan dan peningkatan penting dalam rilis ini:
- Performa > Ringkasan: Mengganti dua baris Total waktu dan Waktu sendiri dengan satu baris Durasi yang juga menampilkan
(self time)dalam tanda kurung, jika ada (crbug.com/395572753). - Masalah: Menambahkan jenis masalah baru: Masalah
<select>di hierarki aksesibilitas dan error Tanda Tangan Pesan SRI yang terjadi selama penguraian atau validasi di layanan jaringan (crbug.com/381044049, crbug.com/347890366). - Aksesibilitas: tab Elemen > Gaya kini menguraikan elemen yang Anda lewati menggunakan navigasi keyboard (crbug.com/396311936).
- Elemen: Masalah pada
<select>kini didukung dan ditandai dengan garis bawah bergelombang (crbug.com/378738916). - Jaringan: Ikon 'titik penggantian' dan peringatan cookie kini ditampilkan di sebelah kanan nama tab, bukan di sebelah kiri (crbug.com/390556283).
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 Anda 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.
- Update server MCP DevTools
- Peningkatan berbagi rekaman aktivitas
- Dukungan untuk @starting-style
- Widget editor untuk tampilan: masonry
- Lighthouse 13
- Saran kode dari Gemini
- Peningkatan untuk server MCP DevTools
- Akses yang lebih cepat ke bantuan AI
- Men-debug rekaman aktivitas performa lengkap dengan Gemini
- Alihkan orientasi panel samping
- Program Developer Google
- Sorotan lain-lain
- Chrome DevTools (MCP) untuk agen AI Anda
- Men-debug hierarki dependensi jaringan dengan Gemini
- Mengekspor percakapan Anda dengan Gemini
- Konfigurasi jalur yang dipertahankan di panel Performa
- Memfilter permintaan jaringan yang dilindungi IP
- Tab Elemen > Tata Letak menambahkan dukungan tata letak masonry
- Lighthouse 12.8.2
- Sorotan lain-lain
- Menemukan 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 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 kembali perubahan 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 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 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 kursor diarahkan ke atasnya
- 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
- Mengabaikan skrip anonim dan berfokus 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 rekaman aktivitas panggilan performance.mark dan performance.measure
- Menggunakan data alamat pengujian di panel Isi otomatis
- Peningkatan panel elemen
- Memaksa lebih banyak status 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