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 serta mendapatkan bagian baru yang dikhususkan untuk privasi. 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 apa 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 mengalibrasi secara otomatis dan mendapatkan dua preset throttling CPU tambahan yang memperkirakan perangkat seluler tingkat bawah dan menengah secara lebih akurat.

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

Sebelum dan sesudah menambahkan kalibrasi pembatasan.

Memilih peristiwa performa yang berbeda dalam percakapan 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 percakapan baru untuk membicarakan acara yang berbeda.

Penyorotan pihak pertama dan 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 ditandai dalam rekaman aktivitas performa. Centang Redupkan pihak ketiga untuk berfokus hanya 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 dalam tooltip dan insight penanda

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

Sebelum dan setelah menambahkan data yang difilter ke tooltip penanda dan tab Insight.

Masalah Chromium: 368135130.

Insight 'Ubah posisi/geometri yang dipaksa'

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

Saat Anda mengarahkan kursor ke insight baru, insight tersebut akan menandai panggilan fungsi teratas dengan tata ulang paksa, rekaman aktivitas stack-nya, dan menunjukkan total waktu tata ulang.

Sebelum dan sesudah menambahkan insight 'Penyusunan ulang paksa'.

Masalah Chromium: 369766156.

Insight 'Optimalkan ukuran DOM'

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

Insight ini menyoroti perubahan posisi/geometri tata letak yang lama dan penghitungan ulang gaya yang dipengaruhi 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'.

Perluas rekaman aktivitas performa dengan console.timeStamp

Extensibility API kini mendukungconsole.timeStamp. Selain performance.measure dan performance.mark, Anda kini dapat membuat jalur kustom dalam rekaman aktivitas performa dan merekam tanda kustom menggunakan console.timeStamp, sebagai alternatif yang lebih ringan yang tidak menambahkan entri ke timeline 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 class semu :open dan berbagai elemen semu

Panel Elements kini mendukung pseudo-class :open di bagian Styles > :hov > Force specific element state 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 semu baru: ::checkmark, ::picker-icon, dan ::column, ::scroll-button, ::scroll-marker, serta ::scroll-marker-group yang terkait dengan carousel .

Masalah Chromium: 383157184, 379805728.

Menyalin semua pesan konsol

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

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

Selain itu, Anda dapat menemukan opsi salin serupa di menu konteks Network > Request Payload.

Masalah Chromium: 40206460, 384967020.

Unit byte di panel Memori

Panel Memori kini menampilkan ukuran dengan unit byte yang sesuai, bukan angka byte yang besar.

Sebelum dan sesudah menampilkan unit byte.

Masalah Chromium: 388589515.

Sorotan lain-lain

Berikut 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 pergeseran terburuk.
  • Daftar abaikan: Bagian 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 dapat diurutkan atau tidak.
  • Ikon tab kini berada di sisi kanan di samping nama tab, bukan di sebelah kiri.

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.

Yang baru di DevTools

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