Yang baru di DevTools, Chrome 132

Sofia Emelianova
Sofia Emelianova
GitHub

Men-debug permintaan jaringan, file sumber, dan rekaman aktivitas performa dengan Gemini

Selain gaya visual CSS, kini Anda dapat melakukan chat dengan Gemini tentang permintaan jaringan, file sumber, dan rekaman aktivitas performa.

Serupa dengan menu konteks di panel Elements, untuk membuka panel AI assistance dan memulai chat dengan Gemini, klik kanan dan pilih Ask AI atau klik tombol Ask AI di samping hal berikut:

  • Permintaan jaringan di panel Jaringan.
  • File di tab Sumber > Halaman.
  • Aktivitas di jalur Performa > Utama.

Tombol dan opsi menu Tanya AI di Jaringan, Sumber, dan Performa.

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 sebelumnya dengan Gemini di panel Bantuan AI dengan mengklik tombol Percakapan baru di sudut kiri atas panel atau dengan menggunakan tombol Tanya AI dan opsi menu panel Jaringan, tab Sumber > Halaman, dan jalur Performa > Utama.

Untuk melihat salah satu chat sebelumnya, pilih perintah yang sesuai dari menu drop-down di bagian tombol Histori. Panel Bantuan AI akan mengingat histori chat Anda saat DevTools terbuka.

Histori chat AI dalam menu drop-down di bawah tombol 'Histori'.

Mengelola penyimpanan ekstensi di Aplikasi > Penyimpanan

Serupa dengan penyimpanan lokal dan sesi, Anda kini dapat melihat dan mengubah entri penyimpanan ekstensi di bagian Aplikasi > Penyimpanan.

Sebelum dan sesudah menambahkan bagian 'Penyimpanan ekstensi' ke panel Aplikasi.

Masalah Chromium: crbug.com/40963428.

Peningkatan performa

Versi ini menghadirkan sejumlah peningkatan pada panel Performa.

Fase interaksi dalam metrik langsung

Sekarang Anda dapat meluaskan interaksi di metrik live performa untuk melihat perincian fase dan pengaturan waktunya.

Sebelum dan sesudah menambahkan pengelompokan fase dan pengaturan waktunya ke interaksi.

Seperti yang disampaikan dalam Ekstensi Data Web, kini di DevTools, rilis fitur ini menandai akhir dukungan untuk ekstensi Data Web.

Masalah Chromium: crbug.com/369097528.

Merender informasi pemblokiran 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.

Sebelum dan sesudah menambahkan informasi pemblokiran render ke tab Ringkasan.

Dukungan untuk peristiwa scheduler.postTask dan panah inisiatornya

Jalur Performa > Utama kini menampilkan peristiwa scheduler.postTask() dan panah inisiator berikut di antara:

  • Schedule postTask -> Fire postTask
  • Schedule postTask -> Abort postTask

Sebelum dan sesudah menambahkan dukungan untuk peristiwa scheduler.postTask dan panah inisiatornya.

Masalah Chromium: crbug.com/40775984.

Peningkatan panel Animasi dan tab Elemen > Gaya

Versi ini menghadirkan beberapa peningkatan pada panel Animations dan tab Elements > Styles.

Tab Elemen > Gaya kini menempatkan tombol animasi Lompat ke panel Animasi di samping nilai properti animation, sehingga Anda dapat dengan mudah mengubah animasi di sana.

Sebelum dan sesudah menambahkan link dari tab Gaya ke panel Animasi.

Pembaruan real-time di tab Computed

Tab Elemen > Dihitung kini memperbarui nilai yang dihitung secara real-time, misalnya, saat animasi memperbaruinya.

Menghitung emulasi tekanan di Sensor

Panel Sensor kini memungkinkan Anda mengemulasi tekanan CPU Nominal, Fair, Serious, dan Critical.

Sebelum dan sesudah menambahkan opsi emulasi tekanan CPU ke panel Sensor.

Masalah Chromium: crbug.com/362277525.

Objek JS dengan nama yang sama yang dikelompokkan berdasarkan sumber di panel Memori

Panel Memory kini membedakan antara objek JS dengan nama yang sama yang berasal dari sumber yang berbeda dan mengelompokkan objek tersebut.

Sebelum dan sesudah pengelompokan objek JS dengan nama yang sama juga menurut sumber.

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. Secara khusus, bagian kini dipisahkan secara visual menjadi "kartu".

Tampilan sebelum dan sesudah memisahkan bagian menjadi 'kartu'.

Panel insight performa tidak digunakan lagi dan dihapus dari DevTools

Semua fitur penting dan berguna dari panel Insight performa kini telah berpindah ke panel Performa, khususnya di metrik live, tab sidebar Insight, dan jalur Perubahan tata letak. Jadi, versi ini tidak lagi menggunakan dan menghapus panel Insight performa dari DevTools.

Tim DevTools berterima kasih atas masukan yang Anda berikan terkait penghentian panel ini dan pengalaman proses debug performa secara keseluruhan. Seperti biasa, kami ingin mengetahui pendapat dan perspektif Anda. Terus kirimkan.

Sorotan lainnya

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Performa:
    • Menghapus batas 3 karakter yang tidak perlu untuk kueri penelusuran.
    • Menambahkan tombol Beranda yang akan membawa Anda kembali ke layar metrik langsung.
    • Memperbaiki pintasan zoom rekaman aktivitas Shift+S/W yang sebelumnya rusak.
  • Elemen > Gaya:
  • Jaringan: Kegagalan pengambilan data kini menjadi peringatan kuning atau error merah untuk menunjukkan bahwa tampilan konten tidak terpengaruh 372055494.

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.