Halaman ini diterjemahkan oleh Cloud Translation API.

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 dekode frame di tab browser yang sama seperti pemutar video itu sendiri. Anda dapat mengamati secara live dan memeriksa potensi masalah lebih cepat (misalnya, alasan terjadinya penurunan frame, mengapa JavaScript berinteraksi dengan pemain dengan cara yang tidak terduga).

Masalah Chromium: 1018414

Ambil screenshot node melalui menu konteks panel Elements

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

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

Ambil screenshot node

Masalah Chromium: 1100253

Pembaruan tab masalah

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

Masalah di pesan konsol

Masalah cookie pihak ketiga kini disembunyikan secara default di tab Masalah. Centang kotak Sertakan masalah cookie pihak ketiga yang baru 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 untuk mengemulasikan sumber local() yang tidak ada dalam aturan @font-face.

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

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

Emulasikan font lokal yang tidak ada

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

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

Menonaktifkan font lokal memudahkan Anda untuk:

Lakukan debug dan ukur performa dan pengoptimalan pemuatan font web
Verifikasi ketepatan 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 tidak aktif dan bereaksi terhadap perubahan status tidak ada aktivitas. Anda kini dapat menggunakan DevTools untuk mengemulasikan perubahan status tidak ada aktivitas di tab Sensors untuk status pengguna dan status layar, tanpa menunggu perubahan status tidak ada aktivitas yang sebenarnya. Anda dapat membuka tab Sensor dari Panel Samping.

Emulasi pengguna tidak aktif

Masalah Chromium: 1090802

Emulasikan `prefers-reduced-data`

Kueri media prefers-reduced-data mendeteksi apakah pengguna lebih suka melihat konten alternatif yang menggunakan lebih sedikit data untuk merender halaman.

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

Emulasikan preferensi-pengurangan-data

Masalah Chromium: 1096068

Dukungan untuk fitur JavaScript baru

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

Operator penetapan logika - DevTools kini mendukung penetapan logis dengan operator baru &&=, ||=, dan ??= di panel Konsol dan Sumber.
Pemisah numerik pretty print - DevTools kini cukup mencetak pemisah numerik di panel Sumber dengan benar.

Masalah Chromium: 1086817, 1080569

Lighthouse 6.2 di panel Lighthouse

Panel Lighthouse sekarang menjalankan Lighthouse 6.2. Periksa catatan rilis untuk mengetahui daftar lengkap perubahan.

Ubah ukuran gambar

Audit baru di Lighthouse 6.2:

Hindari tugas thread utama yang berjalan lama. Melaporkan tugas terlama di thread utama, berguna untuk mengidentifikasi kontributor terburuk terhadap penundaan input.
Link dapat di-crawl. Periksa apakah atribut href elemen anchor tertaut ke tujuan yang sesuai, sehingga link dapat ditemukan.
Elemen gambar tidak berukuran - Periksa apakah width dan height eksplisit disetel pada elemen gambar. Ukuran gambar eksplisit dapat mengurangi pergeseran tata letak dan meningkatkan CLS.
Hindari animasi yang tidak digabungkan. Melaporkan animasi non-gabungan yang muncul 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 Service Workers

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

Sebelumnya, DevTools menampilkan daftar yang disusun bertingkat di bawah panel Application > panel Service worker.

Link ke origin lainnya

Masalah Chromium: 807440

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

Ringkasan cakupan untuk item yang difilter

Masalah Chromium: 1061385

Tampilan detail bingkai baru di panel Aplikasi

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

Tampilan detail bingkai 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 dari jendela yang terbuka menyertakan 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 selengkapnya akan segera ditambahkan ke tampilan detail frame.

Masalah Chromium: 1051466

Pembaruan panel Elements dan Network

Saran warna yang aksesibel di panel Gaya

DevTools kini menyediakan saran warna untuk teks yang memiliki kontras warna rendah.

Pada 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

Pulihkan panel Properties di panel Elements

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

Panel Properties 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, sekarang DevTools memformat nilai header X-Client-Data di panel Header sebagai kode.

Header HTTP X-Client-Data berisi daftar ID eksperimen dan tanda Chrome yang diaktifkan di browser Anda. Nilai header mentah terlihat seperti string buram karena merupakan buffer protokol berenkode base-64 dan serial. 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

Pelengkapan otomatis font kustom di panel Styles

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

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

Font kustom pelengkapan otomatis

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 Jenis saat pengalihan (status 302) terjadi.

Sebelumnya, DevTools terkadang mengubah jenis ini menjadi Other.

Jenis resource pengalihan Display

Masalah Chromium: 997694

Tombol hapus di panel Elements and Network

Kotak teks filter di panel Styles dan Network, serta kotak teks penelusuran DOM di panel Elemen, kini memiliki tombol Hapus. Mengklik Hapus akan menghapus teks apa pun yang Anda masukkan.

Tombol hapus di panel Elements and Network

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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan 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.
Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.