Yang baru di DevTools, Chrome 134

Sofia Emelianova
Sofia Emelianova
GitHub

Panel privasi dan keamanan

Panel Keamanan lama telah berkembang menjadi panel Privasi dan keamanan dan mendapatkan bagian khusus privasi yang baru. Di bagian ini, Anda dapat:

  • Saat DevTools terbuka, batasi cookie pihak ketiga untuk sementara dengan atau tanpa pengecualian dan uji perilaku situs.
  • Lihat tabel yang berisi informasi tentang cookie pihak ketiga, termasuk apakah cookie tersebut diblokir atau dikecualikan oleh mode batas sementara, dan jenis cookie yang mungkin terpengaruh.

Sebelum dan setelah menambahkan bagian Privasi ke panel Keamanan.

Masalah Chromium: 352364594.

Peningkatan panel performa

Versi ini menghadirkan sejumlah peningkatan pada panel Performa.

Preset throttling CPU yang dikalibrasi

Anda kini dapat secara otomatis melakukan kalibrasi dan mendapatkan dua preset throttling CPU tambahan yang lebih akurat untuk perangkat seluler kelas bawah dan menengah.

Di menu drop-down Performance > CPU throttling, pilih Calibrate..., lalu di Settings, klik Calibrate, Continue, dan tunggu DevTools menghitung kecepatan penurunan untuk perangkat Anda. Anda dapat menemukan opsi throttling yang dikalibrasi kembali di menu drop-down Performa > Throttling CPU.

Sebelum dan sesudah menambahkan kalibrasi throttling.

Memilih peristiwa performa yang berbeda dalam chat AI yang sama

Panel Bantuan AI kini memungkinkan Anda mengubah peristiwa yang dipilih dalam rekaman aktivitas performa di chat yang sama. Dengan kata lain, Anda tidak perlu memulai chat baru untuk membahas peristiwa yang berbeda.

Penandaan pihak pertama dan pihak ketiga di Performa

Panel Performa mendapatkan tabel baru di tab Ringkasan yang memungkinkan Anda membedakan antara data pihak pertama, pihak ketiga, dan ekstensi.

Arahkan kursor ke entri dalam tabel untuk melihat peristiwa yang relevan yang ditandai dalam rekaman aktivitas performa. Centang Dimensi pihak ketiga untuk hanya berfokus pada data pihak pertama.

Selain itu, klik ikon di samping entri yang ditandai dalam tabel untuk membuka tab Bottom-up yang dikelompokkan menurut pihak ketiga.

Data kolom di tooltip dan insight penanda

Jika data kolom diaktifkan, Anda kini dapat melihatnya di tooltip penanda metrik dan tab Insight.

Sebelum dan sesudah menambahkan data yang diarsipkan ke tooltip penanda dan tab Insight.

Masalah Chromium: 368135130.

Insight 'Ubah posisi/geometri yang dipaksa'

Tab Performa > Insight mendapatkan tambahan baru ke kumpulan insight: Pembentukan ulang paksa. Pembentukan ulang paksa terjadi saat mesin rendering menjeda eksekusi skrip untuk menghitung gaya dan tata letak. Pembentukan ulang paksa dapat menjadi bottleneck yang sebaiknya Anda hindari.

Saat Anda mengarahkan kursor ke insight baru, insight tersebut akan menandai panggilan fungsi teratas dengan reflow paksa, pelacakan tumpukan, dan menampilkan total waktu reflow.

Sebelum dan sesudah menambahkan insight 'Pembentukan ulang paksa'.

Masalah Chromium: 369766156.

Insight 'Optimalkan ukuran DOM'

Insight baru lainnya adalah Optimalkan ukuran DOM. Hierarki DOM yang besar dapat memperlambat performa halaman Anda.

Insight ini menyoroti perubahan posisi/geometri tata letak yang lama dan penghitungan ulang gaya yang terpengaruh oleh ukuran DOM yang besar dalam rekaman aktivitas performa dan memberikan statistik tentang total elemen, kedalaman, dan sebagian besar turunan.

Sebelum dan sesudah menambahkan insight 'Optimalkan ukuran DOM'.

Memperluas rekaman aktivitas performa dengan console.timeStamp

Extensibility API kini mendukungconsole.timeStamp. Selain performance.measure dan performance.mark, kini Anda dapat membuat jalur kustom dalam rekaman aktivitas performa dan mengambil tanda kustom menggunakan console.timeStamp, sebagai alternatif yang lebih ringan yang tidak menambahkan entri ke linimasa performa internal browser, tetapi hanya menampilkannya dalam rekaman aktivitas performa.

Misalnya, Anda dapat menggunakan sintaksis berikut:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

Dengan Setelan pengambilan > Tampilkan jalur kustom, Anda akan melihat jalur kustom di rekaman aktivitas:

Sebelum dan sesudah menambahkan dukungan console.timeStamp.

Peningkatan panel elemen

Versi ini menghadirkan sejumlah peningkatan pada panel Elemen.

Nilai real-time gaya animasi

Tab Elemen > Gaya kini memperbarui nilai gaya animasi secara real-time.

Dukungan untuk pseudo-class :open dan berbagai pseudo-elemen

Panel Elemen kini mendukung pseudo-class :open di bagian Gaya > :hov > Memaksa status elemen tertentu untuk elemen HTML tertentu seperti <details>, <select>, <dialog>, dan <input>.

Sebelum dan setelah menambahkan opsi &#39;:open&#39;.

Selain itu, panel Elemen kini juga mendukung beberapa elemen pseudo baru: ::checkmark, ::picker-icon, dan terkait carousel ::column, ::scroll-button, ::scroll-marker, dan ::scroll-marker-group.

Masalah Chromium: 383157184, 379805728.

Menyalin semua pesan konsol

Anda kini dapat mengklik kanan-menyalin semua pesan konsol sekaligus.

Sebelum dan sesudah menambahkan opsi &#39;Salin konsol&#39;.

Selain itu, Anda dapat menemukan opsi salin yang serupa di menu konteks Jaringan > Payload Permintaan.

Masalah Chromium: 40206460, 384967020.

Unit byte di panel Memori

Panel Memory kini menampilkan ukuran dengan unit byte yang sesuai, bukan jumlah byte yang besar.

Sebelum dan sesudah menampilkan unit byte.

Masalah Chromium: 388589515.

Sorotan lainnya

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Performa:
    • Anotasi: Anda kini dapat mengklik label untuk memilih entri yang sesuai (crbug.com/388224764).
    • Insight: Mengklik CLS di tab Insight kini akan memilih cluster terburuk, bukan perubahan terburuk.
  • Daftar abaikan: Internal node yang dimulai dengan node: kini diabaikan secara default (crbug.com/382453615).
  • Ekspresi langsung: Memperbaiki bug yang menyebabkan ekspresi langsung memengaruhi perintah $_ (crbug.com/388437265).
  • Elemen > Gaya: Panjang relatif kini memiliki popover yang menampilkan nilai absolut (crbug.com/40778486).
  • Aksesibilitas: Header kolom kini mengumumkan apakah kolom tersebut dapat diurutkan.
  • Ikon tab kini berada di sisi kanan di samping nama tab, bukan di sebelah kiri.

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.