Yang Baru di DevTools (Chrome 115)

Peningkatan elemen

Badge subpetak CSS baru

Panel Elemen mendapatkan badge subgrid baru untuk sub-petak. Fitur ini saat ini masih bersifat eksperimental di Chrome Canary.

Untuk memeriksa dan men-debug petak bertingkat yang merupakan subpetak, sehingga mewarisi jumlah dan ukuran jalur dari induknya, klik badge. Tombol ini akan mengalihkan overlay yang menampilkan kolom, baris, dan jumlahnya di atas elemen di area pandang.

Untuk mengetahui daftar semua badge di panel Elements, lihat Referensi badge.

Masalah Chromium: 1442536.

Spesifisitas pemilih dalam tooltip

Di Elemen > Gaya, arahkan kursor ke nama pemilih untuk melihat bobot kekhususannya di tooltip.

Masalah Chromium: 1204932.

Nilai properti CSS kustom di tooltip

Di Elemen > Gaya, arahkan kursor ke nama properti CSS kustom untuk melihat nilainya dalam tooltip.

Tim DevTools ingin mengucapkan terima kasih kepada 一丝 dan Suyan atas peningkatan ini.

Masalah Chromium: 1380779.

Peningkatan sumber

Penyorotan sintaksis CSS

Panel Sumber mendapatkan hal berikut untuk file CSS yang telah diproses sebelumnya, seperti SASS, SCSS, dan LESS:

• Penyorotan sintaksis.
• Dukungan editor inline. Editor ini mirip dengan editor di Elemen > Gaya, misalnya, Color Picker dan Easing Editor.

Masalah Chromium: 1302261, 1392085.

Pintasan untuk menetapkan titik henti sementara bersyarat

Kini Anda dapat menetapkan titik henti sementara kondisional dengan lebih cepat menggunakan pintasan. Untuk membuka dialog titik henti sementara, tahan Command (MacOS) atau Control (Windows / Linux), lalu klik nomor baris di kolom kiri Sources > Editor.

Masalah Chromium: 1405767.

Aplikasi > Mitigasi Pelacakan Kembali

Eksperimen Mitigasi Pelacakan Pantulan di Chrome memungkinkan Anda mengidentifikasi dan menghapus status situs yang tampaknya melakukan pelacakan lintas situs menggunakan teknik pelacakan pantulan. Panel Aplikasi > Layanan Latar Belakang mendapatkan tab Mitigasi Pelacakan Pantulan baru yang memungkinkan Anda memaksa mitigasi pelacakan secara manual dan mencantumkan situs yang statusnya telah dihapus.

Lihat fitur keamanan ini:

1. Blokir cookie pihak ketiga di Chrome. Buka dan aktifkan > Setelan > Privasi dan keamanan > Cookie dan data situs lainnya > Blokir cookie pihak ketiga.
2. Di chrome://flags, tetapkan eksperimen Mitigasi Pelacakan Pantulan ke Diaktifkan dengan Penghapusan.
3. Periksa halaman demo ini, buka Aplikasi > Layanan Latar Belakang > Mitigasi Pelacakan Pantulan, klik link pantulan di halaman, tunggu (10 detik) hingga Chrome merekam pantulan, lalu klik Paksa jalankan untuk segera menghapus status.

Selain itu, tab Masalah akan memperingatkan Anda tentang penghapusan status mendatang.

Masalah Chromium: 1432303.

Lighthouse 10.2.0

Panel Lighthouse kini menjalankan Lighthouse 10.2.0. Yang paling penting, pemeriksaan Largest Contentful Paint mendapatkan tabel dengan penghitungan fase untuk throttling simulasi dan DevTools. Lihat juga daftar lengkap perubahan.

Untuk mempelajari dasar-dasar penggunaan panel Lighthouse di DevTools, lihat Lighthouse: Mengoptimalkan kecepatan situs.

Masalah Chromium: 772558.

Mengabaikan skrip konten secara default

Setelan > Daftar Abaikan > Skrip konten yang dimasukkan oleh ekstensi kini diaktifkan secara default.

Jika setelan ini diaktifkan:

• Debugger mengabaikan skrip tersebut dan tidak berhenti pada pengecualian yang dilempar oleh skrip tersebut.
• Panel Sumber > Call Stack melewati frame yang diabaikan. Untuk menonaktifkan pengabaian di sini, centang Tampilkan frame dalam daftar yang diabaikan.
• Konsol menciutkan frame yang diabaikan dalam stack trace. Klik Tampilkan N frame lainnya untuk meluaskan, dan Tampilkan lebih sedikit untuk menciutkan lagi.

Selain itu, kotak centang di Daftar Abaikan memiliki teks yang lebih jelas.

Masalah Chromium: 1440958, 1364501.

Jaringan > Pencetakan respons yang rapi secara default

Panel Network > Response kini menampilkan isi respons yang diminifikasi secara default, mirip dengan panel Sources.

Selain itu, file SVG mendapatkan sorotan sintaksis.

Masalah Chromium: 1382752, 1385374.

Sorotan lainnya

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

• Setelan > Perangkat: Menambahkan Facebook untuk Android v407 di Pixel 6 ke daftar string agen.
• Jaringan: Menambahkan pintasan Hapus log jaringan (1444991):
  • MacOS: Command + K
  • Windows/Linux: Control + L
• Menghapus opsi dropdown Perekam > Perekaman N > Panel insight performa (1414773).
• Stylesheet yang gagal dimuat kini disembunyikan dari hierarki navigator (1386059).
• Performa: Memperbaiki tampilan yang salah pada jalur Interaksi yang dapat diluaskan (1432510).
• Elemen: Stylesheet yang gagal dimuat kini digarisbawahi dengan garis bergelombang (1440626).
• Debugger tidak otomatis masuk ke WebAssembly jika tidak ada plugin untuk bahasa masing-masing (1443342).
• Pintasan yang memindahkan kursor satu kata pada satu waktu dipulihkan untuk file CSS di Sumber > Editor (1241848):
  • MacOS: Alt + Panah
  • Windows/Linux: Ctrl + Panah

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.

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

Yang baru di DevTools

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