Yang Baru di DevTools (Chrome 87)

Jecelyn Yeen

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 petak di halaman.

Panel Tata Letak baru memiliki bagian Petak yang menawarkan sejumlah opsi untuk melihat petak.

Lihat dokumentasi untuk mempelajari lebih lanjut.

Masalah Chromium: 1047356

Tab WebAuthn baru

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

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

Tab WebAuthn

Sebelum tab WebAuthn baru, tidak ada dukungan pen-debug-an 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 autentikator ini, menyesuaikan kemampuannya, dan memeriksa statusnya, tanpa memerlukan autentikator fisik. Hal ini membuat pengalaman proses debug menjadi jauh lebih mudah.

Lihat dokumentasi kami untuk mempelajari lebih lanjut fitur WebAuthn.

Masalah Chromium: 1034663

Memindahkan alat antara panel atas dan bawah

DevTools kini mendukung pemindahan alat di DevTools antara panel atas dan bawah. Dengan begitu, Anda dapat melihat dua alat sekaligus.

Misalnya, jika Anda ingin melihat panel Elements dan Sources sekaligus, Anda dapat mengklik kanan panel Sources, lalu memilih Move to bottom untuk memindahkannya ke bagian bawah.

Pindahkan ke bawah

Demikian pula, Anda dapat memindahkan tab bawah ke atas dengan mengklik kanan tab dan memilih Pindahkan ke atas.

Pindahkan ke atas

Masalah Chromium: 1075732

Pembaruan panel Elemen

Melihat panel sidebar Computed di panel Styles

Anda kini dapat mengganti panel sidebar yang Dikomputasi di panel Gaya.

Panel Sidebar yang dikomputasi di panel Gaya diciutkan secara default. Klik tombol untuk mengaktifkan atau menonaktifkannya.

Panel sidebar yang dikomputasi

Masalah Chromium: 1073899

Mengelompokkan properti CSS di panel Computed

Sekarang Anda dapat mengelompokkan properti CSS menurut kategori di panel Computed.

Dengan fitur pengelompokan baru ini, Anda akan lebih mudah menjelajah di panel Computed (lebih sedikit men-scroll) dan berfokus secara selektif pada sekumpulan properti terkait untuk pemeriksaan CSS.

Di panel Elements, pilih elemen. Aktifkan/nonaktifkan kotak centang Grup untuk mengelompokkan/membatalkan pengelompokan properti CSS.

Mengelompokkan properti CSS

Masalah Chromium: 1096230, 1084673, 1106251

Lighthouse 6.4 di panel Lighthouse

Panel Lighthouse kini menjalankan Lighthouse 6.4. Lihat catatan rilis untuk mengetahui daftar lengkap perubahan.

Mercusuar

Audit baru di Lighthouse 6.4:

  • Pramuat font. Memvalidasi apakah semua font yang menggunakanfont-display: optional telah di-preload.
  • Peta sumber yang valid. Memeriksa apakah halaman memiliki peta sumber yang valid untuk JavaScript pihak pertama berukuran besar.
  • [Eksperimental] Library JavaScript besar. Library JavaScript berukuran besar dapat menyebabkan performa yang buruk. Audit ini menyarankan alternatif yang lebih murah untuk library JavaScript besar yang umum seperti moment.js.

Masalah Chromium: 772558

Peristiwa performance.mark() di bagian Waktu

Bagian Waktu dari rekaman Performa kini 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 memfilter permintaan menurut properti untuk menemukan kata kunci khusus lainnya seperti resource-type dan url.

Masalah Chromium: 1121141, 1104188

Pembaruan tampilan detail frame

Menampilkan endpoint COEP dan COOP reporting to

Anda kini dapat melihat endpoint Cross-Origin Embedder Policy (COEP) dan Cross-Origin Opener Policy (COOP)reporting to di bagian Security & Isolation.

Reporting API menentukan header HTTP baru, Report-To, yang memberi developer web cara menentukan endpoint server agar browser dapat mengirimkan peringatan dan error ke endpoint tersebut.

melaporkan ke endpoint

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

Masalah Chromium: 1051466

Menampilkan mode report-only COEP dan COOP

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

label hanya laporan

Tonton video ini untuk mempelajari cara mencegah kebocoran informasi dan mengaktifkan COOP dan COEP di 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 CSS Overview

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

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

Masalah kontras warna rendah

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

Masalah Chromium: 1120316

Menyesuaikan pintasan keyboard di DevTools

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

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

Sesuaikan pintasan keyboard

Untuk mereset semua pintasan, klik Pulihkan pintasan default.

Masalah Chromium: 174309

Download 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, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk mendiskusikan fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

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