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 dapat ditemukan di chrome://media-internals.

Panel Media baru memberikan cara yang lebih mudah untuk melihat peristiwa, log, properti, dan linimasa dekode frame di tab browser yang sama dengan pemutar video itu sendiri. Anda dapat melihat dan memeriksa masalah potensial secara langsung dengan lebih cepat (misalnya, mengapa frame terputus, mengapa JavaScript berinteraksi dengan pemutar secara tidak terduga).

Masalah Chromium: 1018414

Mengambil screenshot node melalui menu konteks panel Elemen

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

Misalnya, Anda dapat mengambil screenshot daftar isi dengan mengklik kanan elemen dan memilih Ambil screenshot node.

Masalah Chromium: 1100253

Pembaruan tab Masalah

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

Masalah cookie pihak ketiga kini disembunyikan secara default di tab Masalah. Centang kotak Sertakan masalah cookie pihak ketiga yang baru untuk melihatnya.

Masalah Chromium: 1096481, 1068116, 1080589

Mengemulasi font lokal yang tidak ada

Buka tab Rendering dan gunakan fitur Nonaktifkan font lokal baru untuk meniru sumber local() yang tidak ada dalam aturan @font-face.

Misalnya, saat font "Rubik" diinstal di perangkat Anda dan aturan @font-face src menggunakannya sebagai font local(), Chrome akan menggunakan file font lokal dari perangkat Anda.

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

Sering kali, developer dan desainer menggunakan dua salinan font yang sama selama pengembangan:

• Font lokal untuk alat desain Anda, dan
• Font web untuk kode Anda

Menonaktifkan font lokal akan memudahkan Anda untuk:

• Melakukan debug dan mengukur performa serta pengoptimalan pemuatan font web
• Memverifikasi kebenaran aturan CSS @font-face Anda
• Menemukan perbedaan antara font web dan versi lokalnya

Masalah Chromium: 384968

Meniru pengguna yang tidak aktif

Idle Detection API memungkinkan developer mendeteksi pengguna yang tidak aktif dan bereaksi terhadap perubahan status tidak aktif. Sekarang Anda dapat menggunakan DevTools untuk mengemulasi perubahan status tidak ada aktivitas di tab Sensor untuk status pengguna dan status layar, alih-alih menunggu perubahan status tidak ada aktivitas yang sebenarnya. Anda dapat membuka tab Sensor dari Panel.

Masalah Chromium: 1090802

Emulasi prefers-reduced-data

Kueri media prefers-reduced-data mendeteksi apakah pengguna lebih suka disajikan konten alternatif yang menggunakan lebih sedikit data agar halaman 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 penetapan logis - DevTools kini mendukung penetapan logis dengan operator baru &&=, ||=, dan ??= di panel Konsol dan Sumber.
• Mencetak pemisah numerik dengan rapi - DevTools kini mencetak pemisah numerik dengan rapi di panel Sources.

Masalah Chromium: 1086817, 1080569

Lighthouse 6.2 di panel Lighthouse

Panel Lighthouse kini menjalankan Lighthouse 6.2. Lihat catatan rilis untuk mengetahui daftar lengkap perubahan.

Audit baru di Lighthouse 6.2:

• Hindari tugas thread utama yang berjalan lama. Melaporkan tugas yang berjalan paling lama di thread utama, berguna untuk mengidentifikasi kontributor utama penundaan input.
• Link dapat di-crawl. Periksa apakah atribut href elemen anchor tertaut ke tujuan yang sesuai, sehingga link dapat ditemukan.
• Elemen gambar dengan ukuran tidak diketahui - Periksa apakah width dan height yang jelas ditetapkan pada elemen gambar. Ukuran gambar yang jelas dapat mengurangi pergeseran tata letak dan meningkatkan CLS.
• Hindari animasi yang tidak digabungkan. Melaporkan animasi yang tidak digabungkan yang tampak tersendat dan mengurangi CLS.
• Memproses peristiwa unload. Melaporkan peristiwa unload. Sebaiknya gunakan peristiwa pagehide atau visibilitychange karena peristiwa unload tidak diaktifkan dengan andal.

Audit yang diupdate di Lighthouse 6.2:

• Hapus JavaScript yang tidak digunakan. Lighthouse kini akan meningkatkan kualitas audit jika halaman memiliki peta sumber JavaScript yang dapat diakses secara publik.

Masalah Chromium: 772558

Penghentian penggunaan listingan "asal lainnya" di panel Pekerja Layanan

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

Sebelumnya, DevTools menampilkan daftar yang berada di bawah panel Application > panel Service workers.

Masalah Chromium: 807440

Menampilkan ringkasan cakupan untuk item yang difilter

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

Dalam contoh di bawah, perhatikan bagaimana ringkasan awalnya mengatakan 446 kB of 2.0 MB (22%) used so far. 1.5 MB unused., lalu mengatakan 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 frame di menu Frame di panel Aplikasi.

Masalah Chromium: 1093247

Detail frame untuk jendela yang dibuka

DevTools kini menampilkan jendela / pop-up yang terbuka di bawah hierarki frame. Tampilan detail frame dari jendela yang dibuka 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 Jaringan dan Elemen

Saran warna yang mudah diakses di panel Styles

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

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

Masalah Chromium: 1093227

Mengaktifkan kembali panel Properti di panel Elemen

Panel Properti sudah kembali, yang tidak digunakan lagi di Chrome 84. Pada versi DevTools mendatang, kami 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 nilai header X-Client-Data apa pun di panel Header sebagai kode.

Header HTTP X-Client-Data berisi daftar ID eksperimen dan flag Chrome yang diaktifkan di browser Anda. Nilai header mentah terlihat seperti string buram karena dienkode dengan base-64, dan merupakan buffer protokol yang diserialkan. Untuk membuat konten lebih transparan bagi developer, DevTools kini menampilkan nilai yang didekode.

Masalah Chromium: 1103854

Melengkapi otomatis font kustom di panel Gaya

Font face yang diimpor kini ditambahkan ke daftar pelengkapan otomatis CSS saat mengedit properti font-family di panel Gaya.

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

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 jenisnya menjadi Other.

Masalah Chromium: 997694

Tombol Hapus di panel Elemen dan Jaringan

Kotak teks filter di panel Gaya dan panel Jaringan, serta kotak teks penelusuran DOM di panel Elemen, kini memiliki tombol Hapus. Mengklik Hapus akan menghapus semua teks yang telah Anda masukkan.

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, 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.

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