Yang baru di DevTools, Chrome 138

Sofia Emelianova
Sofia Emelianova
GitHub

Peningkatan panel performa

Versi ini menghadirkan beberapa peningkatan pada panel Performa.

Origin yang dihubungkan sebelumnya dalam insight 'Hierarki dependensi jaringan'

Insight Performa > Insight > Hierarki dependensi jaringan kini menampilkan daftar origin yang telah atau belum terhubung sebelumnya dan kandidat terhubung sebelumnya, jika ada.

Petunjuk prakoneksi memungkinkan situs Anda membuat koneksi awal ke origin pihak ketiga yang penting dan meningkatkan kecepatan pemuatan halaman.

Sebelum dan sesudah menambahkan origin dan kandidat yang telah terhubung sebelumnya ke insight 'Hierarki dependensi jaringan'.

Untuk mengetahui informasi selengkapnya, lihat Melakukan preconnect ke origin yang diperlukan.

Waktu respons dan pengalihan server dalam insight 'Latensi permintaan dokumen'

Insight Performa > Insight > Latensi permintaan dokumen kini menampilkan waktu respons server dan, jika ada, jumlah atau waktu pengalihan dan pengalihan.

Sebelum dan sesudah menambahkan pengalihan dan waktu respons server ke insight 'Latensi permintaan dokumen'.

Pengalihan di Ringkasan permintaan jaringan

Panel Performance kini menampilkan URL alihan di Summary permintaan jaringan dan di tooltip-nya.

Sebelum dan sesudah menambahkan URL alihan ke Ringkasan dan tooltip permintaan jaringan.

Masalah Chromium: 402353313.

Mengurangi derau dalam rekaman aktivitas performa

Panel Performa kini tidak akan menampilkan peristiwa dari kategori compile mesin JavaScript v8. Sebelumnya, peristiwa ini menyebabkan banyak overhead dan derau yang tidak perlu, terutama peristiwa compile code.

Sebelum dan sesudah menghapus peristiwa 'compile code' dari rekaman aktivitas performa.

Jika Anda melihat bahwa beberapa peristiwa yang penting bagi Anda kini tidak ada, jangan ragu untuk memberikan masukan di crbug.com/414330508.

'Nonaktifkan contoh JavaScript' tidak digunakan lagi

Opsi Nonaktifkan contoh JavaScript di Performa > Setelan rekaman tidak digunakan lagi dan telah dihapus karena jarang berguna dan penggunaannya rendah.

Sebelum dan sesudah menghapus opsi 'Nonaktifkan contoh JavaScript' dari 'Setelan pengambilan'.

Masalah Chromium: 414734883.

Parameter akurasi geolokasi di Sensor

Panel Sensor kini memungkinkan Anda menetapkan akurasi dalam emulasi geolokasi. Dengan cara ini, Anda dapat menguji penanganan berbagai tingkat akurasi GPS.

Sebelum dan sesudah menambahkan parameter 'Akurasi' ke emulasi geolokasi di panel Sensor.

Masalah Chromium: 40074843.

Peningkatan panel elemen

Versi ini menghadirkan beberapa peningkatan pada panel Elemen.

Mempermudah proses debug nilai CSS yang kompleks

Untuk membantu Anda men-debug nilai CSS yang kompleks, tab Elemen > Gaya kini menampilkan tooltip saat diarahkan kursor:

  • Rantai definisi lengkap variabel CSS, sehingga Anda tidak perlu mengklik beberapa link.
  • Evaluasi langkah demi langkah dari penghitungan CSS yang kompleks, sehingga Anda dapat mengidentifikasi bug dengan lebih efisien dan mendapatkan pemahaman yang lebih mendalam tentang cara penghitungan nilai.

Tooltip menampilkan rantai definisi dalam beberapa baris, satu untuk setiap definisi, dan Anda dapat meluaskan penghitungan yang kompleks dan mengarahkan kursor ke nilai untuk menandai dan melacak nilai yang dihitung kembali ke ekspresi awalnya.

Sebelum dan sesudah menambahkan tooltip dengan rantai definisi dan penghitungan kompleks yang dapat diluaskan.

Masalah Chromium: 396080529.

Dukungan @function di Elemen > Gaya

Sebagai persiapan untuk dukungan @function di Chrome, tab Elemen > Gaya kini menautkan nama fungsi kustom Anda ke definisinya di bagian khusus.

Sebelum dan sesudah menautkan nama fungsi kustom Anda ke bagian yang sesuai.

Peningkatan panel jaringan

Versi ini menghadirkan beberapa peningkatan pada panel Jaringan.

has-request-header filter

Panel Jaringan kini mendukung filter has-request-header yang memungkinkan Anda memfilter berdasarkan nama header permintaan tertentu.

Sebelum dan sesudah menambahkan filter 'has-request-header' ke panel Jaringan.

Masalah Chromium: 397481040.

Direct Sockets di Aplikasi Web Terisolasi (IWA)

Di panel Jaringan, Anda kini dapat memantau traffic Aplikasi Web Terisolasi (IWA) melalui TCPSocket, UDPSocket (dalam mode terikat), UDPSocket (dalam mode terhubung).

Untuk melakukannya, pilih koneksi directscoket di samping permintaan reguler dalam tabel, lalu di tab Pesan, pilih pesan.

Sebelum dan sesudah menambahkan dukungan Soket Langsung di IWA ke panel Jaringan.

Aplikasi Web Terisolasi (IWA) menyediakan model keamanan tepercaya tinggi untuk aplikasi web. Untuk mengetahui informasi selengkapnya, lihat Memulai Aplikasi Web Terisolasi (IWA) dan lihat aplikasi demo yang mengimplementasikan Direct Sockets API.

Sorotan lainnya

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Aplikasi > Penyimpanan: Menghapus opsi Web SQL yang tidak digunakan lagi (crbug.com/412707590).
  • Elemen:
  • Jaringan: Menghapus header HTTP Referrer-Policy dari opsi Salin sebagai pengambilan karena merupakan header respons untuk mengontrol perilaku browser, bukan petunjuk sisi klien (crbug.com/413904896).
  • Performa: Menghapus peringatan 'tugas panjang' dari thread pekerja karena tidak memblokir thread utama (crbug.com/40248589).
  • Masalah. Sekarang laporan:
    • Jika ada resource yang dicurigai melacak pengguna yang diblokir.
    • Mitigasi pelacakan kembali, terlepas dari apakah mereka mengakses penyimpanan selama pengalihan atau tidak.
  • Aksesibilitas. Elemen berikut di Elemen > Gaya kini dapat difokuskan dengan keyboard:

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