Yang Baru di DevTools (Chrome 86)

Panel Media baru

DevTools kini menampilkan informasi pemutar media di Panel media.

Sebelum panel media baru di DevTools, informasi logging dan debug tentang pemutar video bisa ditemukan di chrome://media-internals.

Panel Media baru menyediakan cara yang lebih mudah untuk melihat peristiwa, log, properti, dan linimasa frame melakukan dekode pada tab browser yang sama dengan pemutar video itu sendiri. Anda dapat melihat langsung dan memeriksa di potensi masalah lebih cepat (mis. mengapa terjadi frame yang hilang, mengapa JavaScript berinteraksi dengan pemain dengan cara yang tidak terduga).

Masalah Chromium: 1018414

Mengambil screenshot node melalui menu konteks panel Elemen

Anda kini dapat mengambil screenshot node melalui menu konteks di panel Elemen.

Misalnya, Anda dapat mengambil tangkapan layar dari daftar isi dengan mengeklik kanan elemen dan pilih Ambil screenshot node.

Masalah Chromium: 1100253

Update tab Masalah

Bilah peringatan Masalah di panel Konsol kini diganti dengan pesan biasa.

Masalah cookie pihak ketiga kini disembunyikan secara default di tab Masalah. Aktifkan opsi Sertakan masalah cookie pihak ketiga Anda untuk melihatnya.

Masalah Chromium: 1096481, 1068116, 1080589

Emulasikan font lokal yang tidak ada

Buka tab Rendering, lalu gunakan fitur Nonaktifkan font lokal yang baru untuk mengemulasikan font yang tidak ada Sumber local() dalam aturan @font-face.

Misalnya, ketika {i>font<i} "Rubik" diinstal di perangkat Anda dan aturan @font-face src menggunakannya sebagai font local(), Chrome menggunakan file font lokal dari perangkat Anda.

Jika Nonaktifkan font lokal diaktifkan, DevTools akan mengabaikan font local() dan mengambilnya dari jaringan.

Sering kali, pengembang dan desainer menggunakan dua salinan berbeda dari {i>font<i} yang sama selama pengembangan:

• {i>Font<i} lokal untuk {i>tool<i} desain Anda, dan
• Font web untuk kode Anda

Menonaktifkan font lokal akan memudahkan Anda:

• Men-debug dan mengukur performa dan pengoptimalan pemuatan font web
• Verifikasi kebenaran aturan @font-face CSS Anda
• Temukan perbedaan antara font web dan versi lokalnya

Masalah Chromium: 384968

Emulasi pengguna tidak aktif

Idle Detection API memungkinkan developer mendeteksi pengguna yang tidak aktif dan bereaksi terhadap status tidak ada aktivitas perubahan. Anda kini dapat menggunakan DevTools untuk mengemulasikan perubahan status tidak ada aktivitas di tab Sensors untuk pengguna dan status layar, bukan menunggu status tidak ada aktivitas yang sebenarnya berubah. Anda dapat membuka tab Sensors dari Panel Samping.

Masalah Chromium: 1090802

Emulasikan prefers-reduced-data

Kueri media prefers-reduced-data mendeteksi apakah pengguna lebih memilih penayangan alternatif konten yang menggunakan lebih sedikit data untuk halaman yang akan dirender.

Anda kini dapat menggunakan DevTools untuk mengemulasi kueri media prefers-reduced-data.

Masalah Chromium: 1096068

Dukungan untuk fitur JavaScript baru

DevTools kini memiliki dukungan yang lebih baik untuk beberapa fitur bahasa JavaScript terbaru:

• Operator penugasan logis - DevTools kini mendukung penetapan logis dengan operator &&=, ||=, dan ??= di panel Konsol dan Sumber.
• Pemisah numerik Pretty-print - DevTools kini mencetak dengan benar pemisah numerik dengan benar di panel Sumber.

Masalah Chromium: 1086817, 1080569

Lighthouse 6.2 di panel Lighthouse

Panel Lighthouse sekarang menjalankan Lighthouse 6.2. Lihat catatan rilis untuk daftar perubahan.

Audit baru di Lighthouse 6.2:

• Hindari tugas thread utama yang berjalan lama. Melaporkan tugas terpanjang di thread utama, berguna untuk mengidentifikasi kontributor terburuk terhadap penundaan input.
• Link dapat di-crawl. Periksa apakah atribut href elemen anchor tertaut ke atribut yang sesuai tujuan, sehingga tautan dapat ditemukan.
• Elemen gambar tidak berukuran - Periksa apakah width dan height eksplisit telah disetel pada elemen gambar. Ukuran gambar eksplisit dapat mengurangi pergeseran tata letak dan meningkatkan CLS.
• Hindari animasi non-gabungan. Melaporkan animasi non-gabungan yang tampak tersendat dan mengurangi CLS.
• Memproses peristiwa unload. Melaporkan peristiwa unload. Pertimbangkan untuk menggunakan pagehide atau Peristiwa visibilitychange sebagai gantinya karena peristiwa unload tidak diaktifkan dengan andal.

Audit yang diperbarui di Lighthouse 6.2:

• Hapus JavaScript yang tidak digunakan. Lighthouse sekarang akan meningkatkan audit jika sebuah laman memiliki peta sumber JavaScript yang dapat diakses secara publik.

Masalah Chromium: 772558

Penghentian penggunaan "asal lainnya" daftar di panel Service Workers

DevTools sekarang menyediakan link untuk melihat daftar lengkap pekerja layanan dari asal lain di tab browser - chrome://serviceworker-internals/?devtools.

Sebelumnya, DevTools menampilkan daftar yang disusun bertingkat di bawah panel Application > Pekerja layanan Google Analytics.

Masalah Chromium: 807440

Tampilkan ringkasan cakupan untuk item yang difilter

DevTools kini menghitung ulang dan menampilkan ringkasan informasi cakupan secara dinamis saat filter diterapkan pada tab Cakupan. Sebelumnya, tab Cakupan selalu menampilkan ringkasan semua informasi cakupan.

Dalam contoh di bawah ini, perhatikan bagaimana ringkasan awalnya mengatakan 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused. lalu berkata 57 kB of 604 kB (10%) used so far. 546 kB unused. setelah pemfilteran CSS diterapkan.

Masalah Chromium: 1061385

Tampilan detail frame baru di panel Aplikasi

DevTools kini menampilkan tampilan mendetail untuk setiap frame. Akses dengan mengklik bingkai di bawah Frame di panel Application.

Masalah Chromium: 1093247

Detail frame untuk jendela yang terbuka

DevTools kini juga menampilkan jendela / pop-up yang terbuka di bawah hierarki frame. Tampilan detail frame jendela yang terbuka mencakup informasi keamanan tambahan.

Masalah Chromium: 1107766

Informasi keamanan dan isolasi (COEP / COOP)

DevTools kini menampilkan konteks aman, Cross-Origin-Embedder-Policy (COEP) dan Cross-Origin-Opener-Policy (COOP) dalam detail frame.

Informasi keamanan lainnya akan segera ditambahkan ke tampilan detail frame.

Masalah Chromium: 1051466

Update panel Elemen dan Jaringan

Saran warna yang dapat diakses di panel Styles

DevTools kini menyediakan saran warna untuk teks dengan kontras warna rendah.

Pada contoh di bawah, h1 memiliki teks kontras rendah. Untuk memperbaikinya, buka pemilih warna color di panel Styles. Setelah Anda meluaskan bagian Rasio kontras, DevTools akan menyediakan AA dan AAA. Klik warna yang disarankan untuk menerapkan warna.

Masalah Chromium: 1093227

Mengaktifkan kembali panel Properties di panel Elemen

Panel Properties telah kembali dan tidak digunakan lagi di Chrome 84. Di versi mendatang DevTools, kita akan meningkatkan alur kerja untuk memeriksa properti elemen.

Masalah Chromium: 1105205, 1116085

Nilai header X-Client-Data yang dapat dibaca manusia di panel Jaringan

Saat memeriksa resource jaringan di panel Jaringan, DevTools kini memformat X-Client-Data nilai header di panel Header sebagai kode.

Header HTTP X-Client-Data berisi daftar ID eksperimen dan tanda Chrome yang diaktifkan pada browser Anda. Nilai {i>header <i}mentah terlihat seperti {i>string<i} buram karena berenkode base-64, buffering protokol yang diserialisasi. Untuk membuat konten lebih transparan bagi developer, DevTools sekarang menunjukkan nilai yang didekode.

Masalah Chromium: 1103854

Melengkapi font kustom secara otomatis di panel Styles

Tampilan font yang diimpor kini ditambahkan ke daftar pelengkapan otomatis CSS saat mengedit font-family di panel Styles.

Dalam contoh ini, 'Noto Sans' adalah font kustom yang diinstal di mesin lokal. Ditampilkan di daftar penyelesaian CSS. Sebelumnya, tidak demikian.

Masalah Chromium: 1106221

Menampilkan jenis resource secara konsisten di panel Jaringan

DevTools kini secara konsisten menampilkan jenis resource yang sama dengan permintaan jaringan asli dan menambahkan / Redirect ke nilai kolom Type saat pengalihan (status 302) terjadi.

Sebelumnya, DevTools terkadang mengubah jenis menjadi Other.

Masalah Chromium: 997694

Hapus tombol di panel Elemen dan Jaringan

Kotak teks filter di panel Gaya dan panel Jaringan, serta teks penelusuran DOM di panel Elemen, sekarang memiliki tombol Hapus. Mengklik Hapus akan menghapus teks yang Anda memiliki input.

Masalah Chromium: 1067184

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.
• Tulis 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.