Yang baru di DevTools, Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Men-debug CSS dengan Gemini

Chrome DevTools mendapatkan panel bantuan AI eksperimental baru tempat Anda dapat melakukan chat dengan Gemini dan mendapatkan bantuan untuk men-debug CSS.

Coba sekarang. Di panel Elements, klik kanan elemen, lalu pilih Ask AI atau klik tombol yang sesuai di samping elemen. DevTools akan membuka panel Bantuan AI baru.

Opsi menu 'Tanya AI' dan tombol yang sesuai.

Panel baru akan meminta Anda mengaktifkan setelan yang sesuai. Pastikan Anda memenuhi Persyaratan, mengaktifkan tombol setelan, dan kembali ke panel Bantuan AI. Fungsi ini akan mengambil elemen yang Anda pilih sebagai konteks. Ketik pertanyaan Anda tentang elemen tersebut.

Panel bantuan AI baru yang menjawab perintah.

Untuk mempelajari lebih lanjut cara terbaik menggunakan panel baru, lihat 5 Hal Keren yang Dapat Dilakukan dengan Bantuan AI DevTools dan lihat Bantuan AI untuk gaya visual.

Tim DevTools menantikan masukan Anda. Jangan ragu untuk mencantumkannya di crbug.com/364805393.

Kontrol fitur AI di tab setelan khusus

Sekarang Anda dapat mengelola semua fitur AI di satu tempat: tab Setelan > Inovasi AI yang baru. Panduan ini mencantumkan pertimbangan penting, menjelaskan fitur AI, dan memungkinkan Anda mengaktifkan dan menonaktifkannya satu per satu.

Tab inovasi AI baru.

Untuk mengetahui informasi selengkapnya, lihat Setelan > Inovasi AI.

Insight konsol dapat diakses dengan sekali klik

DevTools tidak lagi memerlukan pengaktifan sinkronisasi setelan untuk fitur AI. Jadi, Insight konsol yang dirilis sebelumnya, bersama dengan bantuan AI untuk gaya visual, dapat diakses dengan sekali klik.

Jika Anda login ke Chrome, aktifkan fitur ini di Setelan > Inovasi AI dan Anda siap menggunakannya.

Peningkatan panel performa

Versi ini menghadirkan sejumlah peningkatan pada panel Performa.

Membuat anotasi dan membagikan temuan performa

Panel Performa mendapatkan tab Anotasi baru di sidebar yang dapat diluaskan di sebelah kiri yang menyederhanakan proses pembuatan catatan untuk eksplorasi rekaman aktivitas dan kolaborasi saat membagikan temuan performa.

Sekarang Anda dapat memberi label dan menghubungkan peristiwa dengan panah serta menandai rentang waktu langsung di rekaman aktivitas. Kemudian, Anda dapat menyimpan, membagikan, dan mengupload trace yang dianotasi kembali ke panel Performa.

Tab anotasi baru pada sidebar di sebelah kiri serta peristiwa, rentang, dan koneksi yang dianotasi.

Dapatkan insight performa langsung di panel Performa

Sekarang, Anda dapat menemukan hasil analisis yang bisa ditindaklanjuti di tab Insight baru di sidebar kiri panel Performa. Insight digabungkan dari laporan Lighthouse dan panel Insight performa yang akan segera dihentikan.

Tab Insight bertujuan untuk memberikan analisis terpandu dan menyarankan hasil analisis yang bisa ditindaklanjuti tentang masalah performa yang dapat memperlambat situs Anda. Untuk memanfaatkan insight, buka tab di sidebar kiri panel Performa, luaskan berbagai kategori, serta arahkan kursor dan klik item. Panel Performa akan menandai peristiwa yang sesuai dalam rekaman aktivitas.

Tim DevTools menantikan masukan Anda tentang manfaat insight, cara meningkatkannya, dan pengalaman Anda dalam menggunakannya dengan alat lain, seperti PageSpeed Insights dan Lighthouse. Jangan ragu untuk memberikan masukan di crbug.com/371170842.

Mendeteksi pergeseran tata letak yang berlebihan dengan lebih mudah

Jalur Perubahan tata letak memiliki tampilan baru. Pergeseran tata letak kini ditandai dengan berlian ungu (lebih terlihat) dan dikelompokkan dalam cluster berdasarkan kedekatannya di linimasa. Shift dan clusternya mendapatkan tabel terorganisir yang berisi pengaturan waktu, skor, elemen, dan kemungkinan penyebabnya di tab Ringkasan.

Sebelum dan sesudah pembaruan pada jalur 'Perubahan tata letak' dan tab 'Ringkasan' yang disusun ulang.

Selain itu, tampilan metrik langsung mendapatkan log Perubahan tata letak dengan skor dan elemen di samping tab Interaksi.

Sebelum dan sesudah menambahkan log 'Perubahan tata letak' ke tampilan metrik live.

Masalah Chromium: 369100729.

Menemukan animasi yang tidak digabungkan

Jalur Animations kini menampilkan informasi berguna tentang animasi non-gabungan:

  • Beri nama animasi sesuai dengan properti CSS yang sesuai, jika ada.
  • Menandai animasi non-gabungan dengan segitiga merah pada trek.
  • Menunjukkan alasan kegagalan komposisi di tab Ringkasan.

Animasi sebelum dan sesudah penamaan di jalur, menandai animasi yang tidak digabungkan, dan menampilkan alasan kegagalan.

Untuk mengetahui informasi selengkapnya, lihat Berpegang pada Properti Compositor-Saja dan Kelola Jumlah Layer.

Masalah Chromium: 41006273.

Konkurensi hardware berpindah ke Sensor

Setelan Konkurensi hardware dipindahkan dari panel Performa ke tempat yang lebih sesuai—panel Sensor.

Sebelum dan sesudah memindahkan setelan 'Hardware concurrency' ke panel Sensors.

Masalah Chromium: 371463665.

Abaikan skrip anonim dan fokuskan pada kode Anda dalam pelacakan tumpukan

Stack trace di Konsol kini mendeteksi, mengabaikan, menciutkan, dan (jika diperluas) membuat frame berwarna abu-abu yang berasal dari file yang tercantum dalam daftar abaikan dengan benar. Sebelumnya, nama fungsi tidak berwarna abu-abu di rekaman aktivitas yang diperluas.

Anda juga dapat mengaktifkan baru Setelan > Daftar abaikan > Skrip anonim dari eval atau konsol untuk menyetel DevTools agar mengabaikan skrip anonim tanpa URL sumber.

Sebelum dan sesudah meningkatkan listingan abaikan di pelacakan tumpukan.

Selain itu, saat Anda mengklik kanan dan Simpan sebagai... log konsol, tindakan ini tidak akan menyimpan teks Tampilkan lebih banyak/sedikit.

Masalah Chromium: 40279542, 40945570, 345248263.

Elemen > Gaya: Dukungan untuk mode penulisan sideways-* untuk overlay petak dan kata kunci seluruh CSS

Tab Elemen > Gaya kini mendukung hal berikut:

  • Overlay petak di area pandang kini menampilkan petak untuk mode penulisan sideways-rl dan sideways-lr.
  • Me-resolve kata kunci seluruh CSS. Secara praktis, ini berarti bahwa, misalnya, jika inherit adalah warna, tab Gaya akan menampilkan pemilih warna di sampingnya. Sebelum dan sesudah me-resolve kata kunci di seluruh CSS.

Masalah Chromium: 40280717, 40706051, 40501131.

Audit Lighthouse untuk halaman non-HTTP dalam mode rentang waktu dan snapshot

Lighthouse kini dapat membuat laporan untuk halaman non-HTTP dalam mode rentang waktu dan snapshot.

Audit sebelum dan sesudah mengaktifkan audit untuk halaman non-HTTP dalam mode rentang waktu dan snapshot.

Aksesibilitas

Versi ini memiliki peningkatan aksesibilitas berikut:

  • Di Sumber > Editor, tab dengan file terbuka kini dapat ditutup dengan memfokuskan pada tombol X dan menekan Enter atau Spasi.
  • Di Performa, Anda kini dapat memilih entri dalam rekaman aktivitas dan menekan Spasi untuk membuka menu konteks.
  • Di Performa, tab Insight pada sidebar di sebelah kiri dapat diakses dari keyboard dan dapat "ditabung".

Masalah Chromium: 372411090.

Sorotan lain-lain

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Setelan Throttling kini disinkronkan dengan benar di antara panel Performa dan Jaringan (370332090).
  • Aplikasi > Layanan latar belakang > Pemuatan spekulatif > Aturan sekarang memiliki tombol cukup cetak {} yang mirip dengan Sumber > Editor (40279147).
  • Ekspresi live: Menekan Tab setelah memilih opsi pelengkapan otomatis kini akan keluar dari kolom edit, bukan membuat indentasi teks (349939551).
  • Elemen > Gaya: anchor() dan anchor-size() mendukung sintaksis baru tempat Anda dapat mengurutkan ulang argumen dan menghapus arah anchor-size() (343516786). Selain itu, rendering penggantian tetap (365802559).
  • Jaringan: Memperbaiki pratinjau GraphQL (369931288).
  • Performa: Kini melaporkan progres inkremental pemuatan dan pemrosesan trace.
  • WebAuthn: Kini memperbarui kredensial yang diubah secara dinamis oleh metode signal* (368467199).
  • WebAssembly: Peringatan di Konsol kini memberi tahu Anda jika ada beberapa simbol debug yang tersedia untuk modul WebAssembly dan simbol mana yang sedang digunakan (40879198, 369515221).
  • Overlay Data Web Inti dihapus dari tab Rendering 328487897.
  • Fitur AI generatif kini tidak memerlukan sinkronisasi setelan Chrome.

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 melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

Daftar semua hal yang telah dibahas dalam seri Yang baru di DevTools.