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 Elemen, klik kanan elemen dan pilih Tanya 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, aktifkan tombol setelan, lalu kembali ke panel Bantuan AI. Tindakan ini akan menggunakan elemen yang Anda pilih sebagai konteks. Ketik pertanyaan Anda tentang elemen.

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 dari Anda. Silakan tinggalkan di crbug.com/364805393.

Mengontrol 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 sinkronisasi setelan yang diaktifkan 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.

Menambahkan 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 rekaman aktivitas yang dianotasi kembali ke panel Performa.

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

Dapatkan insight performa langsung di panel Performa

Kini Anda dapat menemukan insight yang bisa ditindaklanjuti di tab Insight baru di sidebar kiri panel Performa. Insight digabungkan dari laporan Lighthouse dan panel Insight performa yang akan dihentikan penggunaannya.

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

Tim DevTools menantikan masukan Anda tentang kegunaan 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 yang teratur dengan pengaturan waktu, skor, elemen, dan kemungkinan penyebab di tab Ringkasan.

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

Selain itu, tampilan metrik live 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:

  • Memberi nama animasi sesuai dengan properti CSS yang sesuai, jika ada.
  • Menandai animasi yang tidak digabungkan dengan segitiga merah di jalur.
  • Menampilkan 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.

Mengabaikan skrip anonim dan berfokus 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 dalam rekaman aktivitas yang diluaskan.

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 pengaktifan 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 di sidebar sebelah kiri dapat diakses dengan keyboard dan dapat "dibuka dengan tab".

Masalah Chromium: 372411090.

Sorotan lainnya

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Setelan throttling kini disinkronkan dengan benar antara panel Performance dan Network (370332090).
  • Aplikasi > Layanan latar belakang > Beban spekulatif > Aturan kini memiliki tombol {} yang menampilkan hasil dengan format yang lebih baik, 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, memperbaiki rendering penggantian (365802559).
  • Jaringan: Memperbaiki pratinjau GraphQL (369931288).
  • Performa: Kini melaporkan progres inkremental dari pelacakan pemuatan dan pemrosesan.
  • 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

Sebaiknya gunakan 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 yang telah dibahas dalam seri Yang baru di DevTools.