Yang Baru di DevTools (Chrome 87)

Alat proses debug Petak CSS baru

DevTools kini memiliki dukungan yang lebih baik untuk proses debug petak CSS.

Proses debug petak CSS

Saat elemen HTML di halaman Anda menerapkan display: grid atau display: inline-grid, Anda dapat melihat badge grid di sampingnya di panel Elemen. Klik badge untuk mengaktifkan/menonaktifkan tampilan overlay grid di halaman.

Panel Tata Letak baru memiliki bagian Petak yang menawarkan sejumlah opsi untuk melihat {i>grid<i}.

Lihat dokumentasi untuk mempelajari lebih lanjut.

Masalah Chromium: 1047356

Tab WebAuthn baru

Anda kini dapat mengemulasi pengautentikasi dan men-debug Web Authentication API dengan WebAuthn baru tab.

Pilih Opsi lainnya > Alat lainnya > WebAuthn untuk membuka tab WebAuthn.

Tab WebAuthn

Sebelum tab WebAuthn baru, tidak ada dukungan proses debug WebAuthn native di Chrome. Developer memerlukan pengautentikasi fisik untuk menguji aplikasi web mereka dengan Web Authentication API.

Dengan tab WebAuthn baru, developer web kini dapat mengemulasi pengautentikasi ini, menyesuaikan kemampuan, dan memeriksa statusnya, tanpa memerlukan otentikator fisik. Hal ini membuat proses {i>debugging <i}menjadi jauh lebih mudah.

Lihat dokumentasi kami untuk mempelajari fitur WebAuthn lebih lanjut.

Masalah Chromium: 1034663

Memindahkan alat antara panel atas dan bawah

DevTools kini mendukung alat pemindahan di DevTools antara panel atas dan bawah. Dengan cara ini, Anda bisa melihat dua {i>tool<i} sekaligus.

Misalnya, jika Anda ingin melihat panel Elemen dan Sumber sekaligus, Anda dapat mengklik kanan klik panel Sources, dan pilih Move to bottom untuk memindahkannya ke bawah.

Pindahkan ke bawah

Anda juga dapat memindahkan tab bawah ke bagian atas dengan mengklik kanan tab lalu memilih Pindahkan ke atas.

Pindahkan ke atas

Masalah Chromium: 1075732

Update panel elemen

Lihat panel sidebar Computed di panel Styles

Anda kini dapat beralih panel sidebar Computed di panel Styles.

Panel Sidebar yang dihitung di panel Gaya diciutkan secara default. Klik tombol untuk aktifkan/nonaktifkan.

Panel sidebar komputasi

Masalah Chromium: 1073899

Mengelompokkan properti CSS di panel Computed

Anda kini dapat mengelompokkan properti CSS berdasarkan kategori di panel Dikomputasi.

Dengan fitur pengelompokan baru ini, akan lebih mudah untuk membuka panel Computed (kurang (scrolling) dan secara selektif berfokus pada sekumpulan properti terkait untuk pemeriksaan CSS.

Di panel Elemen, pilih elemen. Centang kotak Group untuk mengelompokkan/memisahkan CSS properti baru.

Mengelompokkan properti CSS

Masalah Chromium: 1096230, 1084673, 1106251

Lighthouse 6.4 di panel Lighthouse

Panel Lighthouse sekarang menjalankan Lighthouse 6.4. Lihat catatan rilis untuk daftar perubahan.

Mercusuar

Audit baru di Lighthouse 6.4:

  • Pramuat font. Memvalidasi apakah semua font yang menggunakan font-display: optional telah dipramuat.
  • Peta sumber yang valid. Mengaudit apakah halaman memiliki peta sumber yang valid untuk JavaScript pihak pertama yang besar.
  • [Eksperimental] Library JavaScript besar. Library JavaScript yang besar dapat menyebabkan error tingkat tinggi. Audit ini menyarankan alternatif yang lebih murah untuk library JavaScript besar yang umum seperti moment.js.

Masalah Chromium: 772558

performance.mark() peristiwa di bagian Waktu

Bagian Waktu dari Rekaman performa sekarang menandai peristiwa performance.mark().

Peristiwa Performance.mark

Filter resource-type dan url baru di panel Jaringan

Gunakan kata kunci resource-type dan url baru di panel Jaringan untuk memfilter permintaan jaringan.

Misalnya, gunakan resource-type:image untuk berfokus pada permintaan jaringan yang berupa gambar.

filter jenis resource

Lihat filter permintaan menurut properti untuk menemukan kata kunci khusus lainnya seperti resource-type dan url.

Masalah Chromium: 1121141, 1104188

Pembaruan tampilan detail frame

Tampilkan endpoint reporting to COEP dan COOP

Anda kini dapat melihat Kebijakan Penyemat Lintas Asal (COEP) dan Kebijakan Pembuka Lintas Asal (COOP)reporting to di bagian Security & Bagian isolasi.

Reporting API menentukan header HTTP baru, Report-To, yang memberikan cara kepada developer web untuk menentukan endpoint server yang akan dikirimi peringatan dan error oleh browser.

pelaporan ke endpoint

Baca artikel ini untuk mempelajari lebih lanjut cara mengaktifkan COEP dan COOP serta membuat situs Anda "diisolasi lintas origin".

Masalah Chromium: 1051466

Tampilkan mode report-only COEP dan COOP

DevTools kini menampilkan label report-only untuk COEP dan COOP yang disetel ke mode report-only.

label khusus laporan

Tonton video ini untuk mempelajari cara mencegah kebocoran informasi serta mengaktifkan COOP dan COEP di untuk situs Anda.

Masalah Chromium: 1051466

Penghentian penggunaan Settings di menu Alat lainnya

Settings di menu Alat lainnya tidak digunakan lagi. Buka Setelan dari panel utama sebagai gantinya.

Setelan di panel utama

Masalah Chromium: 1121312

Fitur eksperimental

Melihat dan memperbaiki masalah kontras warna di panel Ringkasan CSS

Panel CSS Overview kini menampilkan daftar teks dengan kontras warna rendah di halaman Anda.

Dalam contoh ini, halaman demo memiliki masalah kontras warna yang rendah. Klik masalah tersebut, Anda dapat melihat daftar elemen yang bermasalah.

Masalah kontras warna rendah

Klik elemen dalam daftar untuk membuka elemen di panel Elements. DevTools menyediakan fungsi otomatis saran warna untuk membantu Anda memperbaiki teks yang memiliki kontras rendah.

Masalah Chromium: 1120316

Menyesuaikan pintasan keyboard di DevTools

Anda kini bisa menyesuaikan pintasan keyboard untuk perintah favorit Anda di DevTools.

Buka Setelan > Pintasan, arahkan kursor ke perintah dan klik tombol Edit (ikon pena) untuk menyesuaikan pintasan keyboard.

Sesuaikan pintasan keyboard

Untuk mereset semua pintasan, klik Pulihkan pintasan default.

Masalah Chromium: 174309

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.