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

Mengambil screenshot node

Masalah Chromium: 1100253

Update tab Masalah

Bilah peringatan 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 opsi Sertakan masalah cookie pihak ketiga Anda untuk melihatnya.

kotak centang masalah cookie pihak ketiga

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.

Emulasikan font lokal yang tidak ada

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.

Emulasi pengguna tidak aktif

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.

Emulasikan lebih disukai-kurang-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.

Ubah ukuran gambar

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.

Menautkan ke origin lain

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.

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 bingkai di bawah Frame di panel Application.

Tampilan detail frame baru di panel Aplikasi

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.

Detail bingkai jendela 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 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.

Panel properti di panel Elements

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.

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

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.

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

Jenis resource pengalihan display

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.

Hapus tombol di panel Elemen dan Jaringan

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