Yang Baru di DevTools (Chrome 115)

Peningkatan elemen

Badge subkisi CSS baru

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

Untuk memeriksa dan men-debug petak bertingkat yang merupakan subgrid, sehingga mewarisi jumlah dan ukuran trek dari induknya, klik badge. Fungsi ini membuat overlay yang menampilkan kolom, baris, dan angkanya di atas elemen di area pandang.

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

Masalah Chromium: 1442536.

Kekhususan pemilih dalam tooltip

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

Masalah Chromium: 1204932.

Nilai properti CSS kustom dalam tooltip

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

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

Masalah Chromium: 1380779.

Peningkatan sumber

Penandaan 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 yang ada di Elemen > Gaya, misalnya, Pemilih Warna dan Editor Easing.

Masalah Chromium: 1302261, 1392085.

Pintasan untuk menetapkan titik henti sementara bersyarat

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

Masalah Chromium: 1405767.

Aplikasi > Mitigasi Pelacakan Kembali

Eksperimen Mitigasi Pelacakan Kembali di Chrome memungkinkan Anda mengidentifikasi dan menghapus status situs yang tampak melakukan pelacakan lintas situs menggunakan teknik pelacakan kembali. Application > Panel Layanan Latar Belakang mendapatkan tab Mitigasi Pelacakan Kembali baru yang memungkinkan Anda memaksa pelacakan mitigasi dan mencantumkan situs yang statusnya 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 Kembali ke Diaktifkan Dengan Penghapusan.
3. Periksa halaman demo ini, buka Application > Layanan Latar Belakang > Mitigasi Pelacakan Kembali, klik link pantulan di halaman, tunggu (10 detik) agar Chrome mencatat pantulan, lalu klik Paksa jalankan untuk segera menghapus status.

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

Masalah Chromium: 1432303.

Mercusuar 10.2.0

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

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

Masalah Chromium: 772558.

Abaikan skrip konten secara default

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

Dengan mengaktifkan setelan ini:

• Debugger mengabaikan skrip tersebut dan tidak berhenti pada pengecualian yang ditampilkan oleh skrip tersebut.
• Kolom Sumber > Panel Call Stack melewati frame yang diabaikan. Untuk menonaktifkan opsi lewati di sini, centang Tampilkan frame dalam daftar yang diabaikan.
• Konsol menciutkan frame yang diabaikan dalam pelacakan tumpukan. Klik Tampilkan N bingkai lainnya untuk meluaskan, dan Tampilkan lebih sedikit untuk menciutkan kembali.

Selain itu, kotak centang di Ignore List mendapatkan teks yang lebih jelas.

Masalah Chromium: 1440958, 1364501.

Jaringan > Merespons presisi-printing secara {i>default<i}

Bagian Jaringan > Panel Response kini mencetak isi respons yang diminifikasi secara default, mirip dengan panel Sumber.

Selain itu, file SVG mendapatkan penyorotan sintaksis.

Masalah Chromium: 1382752, 1385374.

Sorotan lain-lain

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 Clear network log (1444991):
  • MacOS: Command + K
  • Windows/Linux: Control + L
• Menghapus Perekam > Rekaman N > Opsi drop-down panel insight performa (1414773).
• Stylesheet yang gagal dimuat kini disembunyikan dari hierarki navigator (1386059).
• Performa: Memperbaiki kesalahan tampilan jalur Interactions yang dapat diperluas (1432510).
• Elemen: Stylesheet yang gagal dimuat kini diberi garis bawah dengan garis bergelombang (1440626).
• Debugger tidak otomatis berjalan di WebAssembly jika tidak ada plugin untuk masing-masing bahasa (1443342).
• Pintasan yang memindahkan kursor satu kata dalam satu waktu dipulihkan untuk file CSS di Sumber > Editor (1241848):
  • MacOS: Alt + Panah
  • Windows/Linux: Ctrl + Panah

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, menguji API platform web mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait dengan DevTools.

• Kirim saran atau masukan kepada kami melalui crbug.com.
• Laporkan masalah DevTools menggunakan Opsi lainnya   > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Beri komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.

Yang baru di DevTools

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