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 > Pohon dependensi jaringan kini menampilkan daftar asal yang telah terhubung sebelumnya dan kandidat pra-koneksi yang digunakan atau tidak digunakan, jika ada.

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

Sebelum dan sesudah menambahkan asal dan kandidat yang sudah 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 pengalihan dan waktu 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 pengalihan di Summary permintaan jaringan dan di tooltipnya.

Sebelum dan sesudah menambahkan URL pengalihan 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 pada mesin JavaScript v8. Sebelumnya, peristiwa ini menyebabkan banyak overhead dan gangguan yang tidak perlu, terutama peristiwa compile code.

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

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.

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

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.

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

Masalah Chromium: 40074843.

Peningkatan panel Elemen

Versi ini menghadirkan beberapa peningkatan pada panel Elemen.

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.

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

Masalah Chromium: 396080529.

@function di Elements > Styles

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

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

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.

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

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.

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

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:
  • 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. Now reports:
    • 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:

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.