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 menyediakan 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 melakukan live view dan memeriksa potensi masalah lebih cepat (misalnya, alasan terjadinya frame yang menurun, alasan 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 screenshot tabel konten dengan mengklik kanan elemen, lalu memilih 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 kotak centang Sertakan masalah cookie pihak ketiga 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 yang 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.

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 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, bukan menunggu perubahan status tidak ada aktivitas yang sebenarnya. 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 suka melihat konten alternatif 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 penetapan logika - DevTools kini mendukung penetapan logis dengan operator baru &&=, ||=, dan ??= di panel Konsol dan Sumber.
Pemisah numerik Pretty-print - DevTools kini mencetak dengan benar pemisah numerik di panel Sumber.

Masalah Chromium: 1086817, 1080569

Lighthouse 6.2 di panel Lighthouse

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

Ubah ukuran gambar

Audit baru di Lighthouse 6.2:

Hindari tugas thread utama yang berjalan lama. Melaporkan tugas terpanjang di thread utama, yang berguna untuk mengidentifikasi kontributor terburuk terhadap penundaan input.
Link dapat di-crawl. Periksa apakah atribut href elemen anchor ditautkan ke tujuan yang sesuai, sehingga link 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 muncul tersendat dan mengurangi CLS.
Memproses peristiwa unload. Melaporkan peristiwa unload. Pertimbangkan untuk menggunakan peristiwa pagehide atau visibilitychange 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 suatu halaman memiliki peta sumber JavaScript yang dapat diakses secara publik.

Masalah Chromium: 772558

Penghentian penggunaan listingan "origin lainnya" di panel Service Workers

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

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

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

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 bawah menu Frames 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 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 Properties di panel Elemen

Panel Properties telah kembali dan tidak digunakan lagi di Chrome 84. Pada DevTools versi mendatang, 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 nilai header X-Client-Data apa pun 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 akan terlihat seperti string buram karena merupakan buffering protokol serial dengan enkode 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

Melengkapi font kustom secara otomatis 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 ini 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 Styles dan panel Network, serta kotak teks penelusuran DOM di panel Elements, kini memiliki tombol Hapus. Mengklik Hapus akan menghapus teks apa pun yang telah Anda masukkan.

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 > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.