Yang baru di DevTools, Chrome 138

Peningkatan panel performa

Versi ini menghadirkan beberapa peningkatan pada panel Performa.

Origin yang dihubungkan sebelumnya dalam insight 'Hierarki dependensi jaringan'

Insight Performa > Insight > Pohon dependensi jaringan kini menampilkan daftar asal yang telah terhubung sebelumnya atau tidak digunakan dan kandidat pra-koneksi, jika ada.

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

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 pengalihan dan waktu pengalihan.

Pengalihan di Ringkasan permintaan jaringan

Panel Performance kini menampilkan URL pengalihan di Summary permintaan jaringan dan di tooltipnya.

Masalah Chromium: 402353313.

Mengurangi derau dalam rekaman aktivitas performa

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

Jika Anda melihat bahwa beberapa acara yang penting bagi Anda kini tidak ada, sampaikan masukan Anda di crbug.com/414330508.

'Nonaktifkan contoh JavaScript' yang tidak digunakan lagi

Opsi Nonaktifkan contoh JavaScript di Performa > Setelan perekaman telah dihentikan dan dihapus karena jarang berguna dan jarang digunakan.

Masalah Chromium: 414734883.

Parameter akurasi geolokasi di Sensor

Panel Sensor kini memungkinkan Anda menetapkan akurasi dalam peniruan geolokasi. Dengan begitu, Anda dapat menguji penanganan berbagai tingkat akurasi GPS.

Masalah Chromium: 40074843.

Peningkatan panel Elemen

Versi ini menghadirkan beberapa peningkatan pada panel Elements.

Men-debug nilai CSS yang kompleks dengan lebih mudah

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

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

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

Masalah Chromium: 396080529.

@function di panel Elements > Styles

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

Peningkatan panel Jaringan

Versi ini menghadirkan beberapa peningkatan pada panel Network.

has-request-header filter

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

Masalah Chromium: 397481040.

Direct Sockets di Aplikasi Web Terisolasi

Di panel Network, Anda kini dapat memantau traffic Isolated Web Apps (IWA) melalui TCPSocket, UDPSocket (dalam mode terikat), UDPSocket (dalam mode terhubung).

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

Aplikasi Web Terisolasi (IWA) menyediakan model keamanan dengan tingkat kepercayaan tinggi untuk aplikasi web. Untuk mengetahui informasi selengkapnya, lihat Mulai menggunakan Aplikasi Web Terisolasi (IWA) dan lihat aplikasi demo yang menerapkan Direct Sockets API.

Sorotan lain-lain

Berikut beberapa perbaikan dan peningkatan penting dalam rilis ini:

• Aplikasi > Penyimpanan: Menghapus opsi Web SQL yang tidak digunakan lagi (crbug.com/412707590).
• Elemen:
  • Mengaktifkan secara default penyorotan masalah dengan elemen dan atribut di DOM.
  • Styles: Menambahkan nilai clip ke opsi pelengkapan otomatis overflow.
• Jaringan: Menghapus header HTTP Referrer-Policy dari opsi Salin sebagai pengambilan data karena merupakan header respons untuk mengontrol perilaku browser, bukan perintah sisi klien (crbug.com/413904896).
• Performa: Menghapus peringatan 'tugas panjang' dari thread pekerja karena tidak memblokir thread utama (crbug.com/40248589).
• Masalah. Laporan sekarang:
  • Jika ada resource yang dicurigai melacak pengguna 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:
  • Contoh bayangan (crbug.com/401213105).
  • Link nama penempatan anchor (crbug.com/401213107).
  • Tombol editor petak dan fleksibel (crbug.com/401213522).
  • Panjang (crbug.com/401211976).
  • Link URL (crbug.com/401213104).
  • Nama dan nilai properti (crbug.com/417458979).

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 Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

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

• Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

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