Yang Baru di DevTools (Chrome 115)

Peningkatan elemen

Badge sub-grid CSS baru

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

Untuk memeriksa dan men-debug petak bertingkat yang merupakan subpetak, dan oleh karena itu mewarisi jumlah dan ukuran jalur dari induknya, klik badge. Overlay ini menampilkan kolom, baris, dan nomornya di atas elemen dalam area tampilan.

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

Masalah Chromium: 1442536.

Spesifisitas pemilih di tooltip

Di Elements > Styles, arahkan kursor ke nama pemilih untuk melihat bobot spesifisitasnya dalam tooltip.

Masalah Chromium: 1204932.

Nilai properti CSS kustom dalam tooltip

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

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

Masalah Chromium: 1380779.

Peningkatan sumber

Penyorotan sintaksis CSS

Panel Sources 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 Elements > Styles, misalnya, Color Picker dan Easing Editor.

Masalah Chromium: 1302261, 1392085.

Pintasan untuk menetapkan titik henti sementara bersyarat

Anda kini dapat menetapkan titik henti sementara kondisional lebih cepat dengan 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 Pantulan

Eksperimen Mitigasi Pelacakan Pantulan di Chrome memungkinkan Anda mengidentifikasi dan menghapus status situs yang tampaknya melakukan pelacakan lintas situs menggunakan teknik pelacakan pantulan. Panel Application > Background Services mendapatkan tab Bounce Tracking Mitigations baru yang memungkinkan Anda secara manual menerapkan mitigasi pelacakan 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 Pantulan ke Diaktifkan Dengan Penghapusan.
3. Periksa halaman demo ini, buka Application > Background Services > Bounce Tracking Mitigations, klik link pentalan di halaman, tunggu (10 detik) hingga Chrome mencatat pentalan, lalu klik Force run untuk menghapus status secara langsung.

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

Masalah Chromium: 1432303.

Lighthouse 10.2.0

Panel Lighthouse kini menjalankan Lighthouse 10.2.0. Terutama, pemeriksaan Largest Contentful Paint mendapatkan tabel dengan perhitungan fase untuk simulasi dan pembatasan 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 olehnya.
• Panel Sumber > Call Stack melewati frame yang diabaikan. Untuk menonaktifkan melewati di sini, centang Tampilkan frame dalam daftar yang diabaikan.
• Konsol meminimalkan frame yang diabaikan dalam stack trace. Klik Tampilkan N frame lainnya untuk meluaskan, dan Tampilkan lebih sedikit untuk menciutkan kembali.

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

Masalah Chromium: 1440958, 1364501.

Jaringan > Respons pencetakan rapi secara default

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

Selain itu, file SVG mendapatkan penyorotan sintaksis.

Masalah Chromium: 1382752, 1385374.

Sorotan lain-lain

Berikut 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 drop-down Recorder > Recording N > Performance insights panel (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 yang bersangkutan (1443342).
• Pintasan yang memindahkan kursor satu kata dalam satu waktu dipulihkan untuk file CSS di Sources > 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, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk mendiskusikan fitur baru, update, atau hal lain yang terkait dengan DevTools.

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

Yang baru di DevTools

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