Yang Baru di DevTools (Chrome 86)

Jecelyn Yeen

Panel Media Baru

DevTools kini menampilkan informasi pemutar media di Panel media.

Panel Media Baru

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 decode frame di tab browser yang sama dengan pemutar video itu sendiri. Anda dapat melihat dan memeriksa potensi masalah secara lebih cepat (misalnya, alasan frame yang terputus terjadi, alasan JavaScript berinteraksi dengan pemutar dengan cara yang 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.

Mengambil screenshot node

Masalah Chromium: 1100253

Pembaruan tab masalah

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

Masalah dalam pesan konsol

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

kotak centang masalah cookie pihak ketiga

Masalah Chromium: 1096481, 1068116, 1080589

Mengemulasikan font lokal yang tidak ada

Buka tab Rendering dan gunakan fitur Disable local fonts baru untuk mengemulasi 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.

Mengemulasikan font lokal yang tidak ada

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:

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

Masalah Chromium: 384968

Mengemulasi pengguna yang tidak aktif

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

Mengemulasi pengguna yang tidak aktif

Masalah Chromium: 1090802

Mengemulasikan prefers-reduced-data

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

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

Mengemulasi 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 Console dan Sumber.
  • Mencetak pemisah numerik dengan rapi - DevTools kini mencetak pemisah numerik dengan rapi di panel Sumber.

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.

Mengubah ukuran gambar

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 tanpa ukuran - Periksa apakah width dan height eksplisit 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 diperbarui di Lighthouse 6.2:

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

Masalah Chromium: 772558

Penghentian listingan "asal lainnya" di panel Pekerja Layanan

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

Sebelumnya, DevTools menampilkan daftar bertingkat di panel Application > panel Service workers.

Menautkan ke origin lain

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.

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

Ringkasan cakupan untuk item yang difilter

Masalah Chromium: 1061385

Tampilan detail frame baru di panel Aplikasi

DevTools kini menampilkan tampilan mendetail untuk setiap frame. Akses dengan mengklik frame di menu Frames di panel Application.

Tampilan detail frame baru di panel Aplikasi

Masalah Chromium: 1093247

Detail bingkai untuk jendela yang terbuka

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

Detail bingkai jendela yang terbuka

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 dan isolasi

Informasi keamanan lainnya akan segera ditambahkan ke tampilan detail bingkai.

Masalah Chromium: 1051466

Update panel Elemen dan Jaringan

Saran warna yang mudah diakses di panel Gaya

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

Pada contoh di bawah, h1 memiliki teks kontras rendah. Untuk memperbaikinya, buka pemilih warna properti color di panel Gaya. 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 kembali, yang tidak digunakan lagi di Chrome 84. Dalam versi DevTools mendatang, kami akan meningkatkan alur kerja untuk memeriksa properti elemen.

Panel properti di panel 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 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 merupakan buffer protokol serial yang dienkode base-64. Untuk membuat konten lebih transparan bagi developer, DevTools kini menampilkan nilai yang didekode.

Nilai header `X-Client-Data` yang dapat dibaca manusia

Masalah Chromium: 1103854

Auto-complete font kustom di panel Gaya

Font 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 komputer lokal. Ini ditampilkan dalam daftar penyelesaian CSS. Sebelumnya, tidak.

Pelengkapan otomatis font kustom

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.

Menampilkan jenis resource pengalihan

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 Anda masukkan.

Tombol hapus di panel Elemen dan Jaringan

Masalah Chromium: 1067184

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.

Yang baru di DevTools

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