Yang baru di DevTools, Chrome 131

Sofia Emelianova
Sofia Emelianova
GitHub

Melakukan Proses Debug CSS dengan Gemini

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

Coba sekarang. Di panel Elements, klik kanan elemen, lalu 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, dan kembali ke panel Bantuan AI. Elemen yang Anda pilih akan digunakan sebagai konteks. Ketik pertanyaan Anda tentang elemen tersebut.

Panel bantuan AI baru yang menjawab perintah.

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

Tim DevTools menantikan masukan dari Anda. Silakan berikan masukan di crbug.com/364805393.

Mengontrol fitur AI di tab setelan khusus

Sekarang Anda dapat mengelola semua fitur AI di satu tempat: baru di tab Setelan > Inovasi AI. Bagian ini mencantumkan pertimbangan penting, menjelaskan fitur AI, dan memungkinkan Anda mengaktifkan serta 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 penataan gaya, 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.

Memberi 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 pada rekaman aktivitas. Kemudian, Anda dapat menyimpan, membagikan, dan mengupload kembali rekaman aktivitas yang diberi anotasi ke panel Performa.

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

Mendapatkan insight performa langsung di panel Performa

Anda kini dapat menemukan insight yang dapat 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 hasil analisis yang dapat 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 menggunakannya dengan alat lain, seperti PageSpeed Insights dan Lighthouse. Jangan ragu untuk memberikan masukan Anda di crbug.com/371170842.

Mendeteksi peralihan tata letak berlebihan dengan lebih mudah

Track Pergeseran tata letak memiliki tampilan baru. Pergeseran tata letak kini ditandai dengan berlian ungu (yang lebih terlihat) dan dikelompokkan dalam cluster berdasarkan kedekatannya pada linimasa. Kedua pergeseran dan clusternya mendapatkan tabel yang teratur dengan waktu, skor, elemen, dan potensi penyebab masalah di tab Ringkasan.

Sebelum dan sesudah update pada jalur 'Pergeseran tata letak' dan penataan ulang tab 'Ringkasan'.

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

Sebelum dan sesudah menambahkan log 'Pergeseran tata letak' ke tampilan metrik aktif.

Masalah Chromium: 369100729.

Mendeteksi animasi yang tidak digabungkan

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

  • Menamai animasi sesuai dengan properti CSS yang sesuai, jika ada.
  • Menandai animasi yang tidak digabungkan dengan segitiga merah di jalur.
  • Menampilkan alasan kegagalan komposit di tab Ringkasan.

Animasi penamaan sebelum dan sesudah dalam jalur, menandai yang tidak dikomposisikan, dan menampilkan alasan kegagalan.

Untuk mengetahui informasi selengkapnya, lihat Tetap Menggunakan Properti Khusus Kompositor dan Mengelola Jumlah Lapisan.

Masalah Chromium: 41006273.

Konkurensi hardware berpindah ke Sensor

Setelan Hardware concurrency dipindahkan dari panel Performance ke tempat yang lebih sesuai—panel Sensors.

Sebelum dan sesudah memindahkan setelan 'Concurrency hardware' ke panel Sensor.

Masalah Chromium: 371463665.

Abaikan skrip anonim dan fokus pada kode Anda dalam stack trace

Stack trace di Konsol kini mendeteksi, mengabaikan, menciutkan, dan (jika diperluas) mengabui frame yang berasal dari file yang ada dalam daftar yang diabaikan dengan benar. Sebelumnya, nama fungsi tidak berwarna abu-abu dalam 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 daftar yang diabaikan dalam rekaman aktivitas.

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

Masalah Chromium: 40279542, 40945570, 345248263.

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

Tab Elemen > Gaya kini mendukung hal berikut:

  • Overlay petak di area tampilan kini menampilkan petak untuk mode penulisan sideways-rl dan sideways-lr.
  • Menyelesaikan kata kunci di seluruh CSS. Secara praktis, artinya, misalnya, jika inherit adalah warna, tab Gaya akan menampilkan pemilih warna di sampingnya. Sebelum dan sesudah menyelesaikan kata kunci CSS-wide.

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.

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

Aksesibilitas

Versi ini memiliki peningkatan aksesibilitas berikut:

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

Masalah Chromium: 372411090.

Sorotan lain-lain

Berikut beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Setelan pembatasan kini disinkronkan dengan benar antara panel Performa dan Jaringan (370332090).
  • Application > Background services > Speculative loads > Rules kini memiliki tombol cetak rapi {} yang mirip dengan Sources > 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 yang memungkinkan Anda menyusun ulang argumen dan menghilangkan arah anchor-size() (343516786). Selain itu, memperbaiki rendering penggantian (365802559).
  • Jaringan: Memperbaiki pratinjau GraphQL (369931288).
  • Performa: Sekarang melaporkan progres inkremental pemuatan dan pemrosesan rekaman aktivitas.
  • WebAuthn: Sekarang memperbarui kredensial yang diubah oleh metode signal* secara dinamis (368467199).
  • WebAssembly: Peringatan di Console 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.

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.

Yang baru di DevTools

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