Yang Baru di DevTools (Chrome 103)

Merekam peristiwa klik ganda dan klik kanan di panel Perekam

Panel Perekam kini dapat merekam peristiwa klik ganda dan klik kanan.

Merekam peristiwa klik ganda dan klik kanan di panel Perekam

Dalam contoh ini, mulai perekaman dan coba lakukan langkah-langkah berikut:

  • Klik dua kali kartu untuk memperbesarnya
  • Klik kanan kartu dan pilih tindakan dari menu konteks

Untuk memahami cara Perekam merekam peristiwa ini, luaskan langkah-langkahnya:

  • Klik dua kali dicatat sebagai type: doubleClick.
  • Peristiwa klik kanan direkam sebagai type: click, tetapi dengan properti button yang ditetapkan ke secondary. Nilai button untuk klik mouse normal adalah primary.

Masalah Chromium: 1300839, 1322879, 1299701, 1323688

Mode rentang waktu dan snapshot baru di panel Lighthouse

Sekarang Anda dapat menggunakan Lighthouse untuk mengukur performa situs Anda di luar pemuatan halaman.

Mode rentang waktu dan snapshot baru di panel Lighthouse

Panel Lighthouse kini mendukung 3 mode pengukuran alur pengguna:

  • Laporan Navigasi menganalisis pemuatan satu halaman. Navigasi adalah jenis laporan yang paling umum. Semua laporan Lighthouse sebelum versi saat ini adalah laporan navigasi.
  • Laporan Rentang Waktu menganalisis periode waktu arbitrer, biasanya yang berisi interaksi pengguna.
  • Laporan Snapshot menganalisis halaman dalam status tertentu, biasanya setelah pengguna berinteraksi dengannya.

Misalnya, mari kita ukur performa penambahan item ke keranjang di halaman demo ini. Pilih mode Rentang waktu, lalu klik Mulai rentang waktu. Scroll dan tambahkan beberapa item ke keranjang. Setelah selesai, klik Akhiri rentang waktu untuk membuat laporan Lighthouse tentang interaksi pengguna.

Mode rentang waktu

Lihat Alur pengguna di Lighthouse untuk mempelajari kasus penggunaan, manfaat, dan batasan unik dari setiap mode.

Masalah Chromium: 1291284

Update Insight Performa

Kontrol zoom yang ditingkatkan di panel Insight Performa

DevTools kini akan memperbesar tampilan berdasarkan kursor mouse, bukan posisi penunjuk waktu.Dengan zoom berbasis kursor terbaru, Anda dapat memindahkan mouse ke mana saja di jalur, dan memperbesar tampilan ke area yang diinginkan secara langsung.

Lihat Insight Performa untuk mempelajari cara mendapatkan insight yang dapat ditindaklanjuti dan meningkatkan performa situs Anda dengan panel.

Masalah Chromium: 1313382

Mengonfirmasi penghapusan rekaman performa

DevTools kini menampilkan dialog konfirmasi sebelum menghapus rekaman performa.

Mengonfirmasi penghapusan rekaman performa

Masalah Chromium: 1318087

Mengatur ulang panel di panel Elemen

Anda kini dapat menyusun ulang panel di panel Elemen berdasarkan preferensi Anda.

Misalnya, saat Anda membuka DevTools di layar yang sempit, panel Aksesibilitas disembunyikan di bawah tombol Tampilkan lebih banyak. Jika Anda sering men-debug masalah aksesibilitas, Anda kini dapat menarik panel ke depan agar lebih mudah diakses.

Mengatur ulang panel di panel Elemen

Masalah Chromium: 1146146

Memilih warna di luar browser

DevTools kini mendukung pemilihan warna di luar browser. Sebelumnya, Anda hanya dapat memilih warna di dalam browser.

Di panel Styles, klik pratinjau warna untuk membuka pemilih warna. Gunakan penyalin warna untuk memilih warna dari mana saja.

Memilih warna di luar browser

Masalah Chromium: 1245191

Pratinjau nilai dalam baris yang ditingkatkan selama proses debug

Sekarang debugger menampilkan pratinjau nilai inline dengan benar.

Dalam contoh ini, fungsi double memiliki parameter input a dan variabel x. Letakkan titik henti sementara pada baris return dan jalankan kode. Pratinjau inline menampilkan nilai a dan x dengan benar. Sebelumnya, debugger tidak menampilkan nilai x dalam pratinjau inline.

Pratinjau nilai dalam baris yang ditingkatkan selama proses debug

Masalah Chromium: 1316340

Mendukung blob besar untuk pengautentikasi virtual

Tab WebAuthn kini memiliki kotak centang Mendukung blob besar baru untuk pengautentikasi virtual.

Kotak centang ini dinonaktifkan secara default. Anda dapat mengaktifkannya hanya untuk autentikator dengan protokol ctap2 yang mendukung kunci resident.

 Mendukung blob besar untuk pengautentikasi virtual

Masalah Chromium: 1321803

Pintasan keyboard baru di panel Sources

Dua pintasan keyboard baru kini tersedia di panel Sumber:

  • Beralih sidebar navigasi (kiri) dengan Control / Command + Shift + Y
  • Beralih sidebar debugger (kanan) dengan Control / Command + Shift + H

Pintasan keyboard baru untuk panel Sources

Masalah Chromium: 1226363

Peningkatan peta sumber

Sebelumnya, developer mengalami kegagalan acak selama:

  • Men-debug dengan contoh Codepen
  • Mengidentifikasi lokasi sumber masalah performa dalam contoh Codepen
  • Tab Component tidak ada saat React DevTools diaktifkan

Berikut beberapa perbaikan pada peta sumber untuk meningkatkan pengalaman pen-debugan secara keseluruhan:

  • Pemetaan yang benar antara lokasi dan offset untuk skrip sebaris dan lokasi sumber
  • Menggunakan informasi penggantian untuk lokasi teks frame
  • Menyelesaikan URL relatif dengan benar menggunakan URL frame

Masalah Chromium: 1319828, 1318635, 1305475

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