Yang Baru di DevTools (Chrome 103)

Merekam peristiwa klik dua kali dan klik kanan di panel Perekam

Panel Perekam kini dapat merekam peristiwa klik dua kali dan klik kanan.

Merekam peristiwa klik dua kali 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 dicatat sebagai type: click, tetapi dengan properti button ditetapkan ke secondary. Nilai button dari klik mouse normal adalah primary.

Masalah Chromium: 1300839, 1322879, 1299701, 1323688

Mode snapshot dan rentang waktu baru di panel Lighthouse

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

Mode snapshot dan rentang waktu baru di panel Lighthouse

Panel Lighthouse kini mendukung 3 mode pengukuran alur penggunaan:

  • 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 jangka 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 penggunaan 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 berdasarkan kursor mouse, bukan posisi pemutar.Dengan zoom berbasis kursor terbaru, Anda dapat memindahkan mouse ke mana saja di trek, dan langsung memperbesar ke area yang diinginkan.

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

Masalah Chromium: 1313382

Mengonfirmasi untuk menghapus rekaman performa

DevTools kini menampilkan dialog konfirmasi sebelum menghapus rekaman performa.

Mengonfirmasi untuk menghapus rekaman performa

Masalah Chromium: 1318087

Mengurutkan ulang panel di panel Elemen

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

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

Mengurutkan 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 dalam browser.

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

Memilih warna di luar browser

Masalah Chromium: 1245191

Meningkatkan pratinjau nilai inline selama proses debug

Debugger kini menampilkan pratinjau nilai inline dengan benar.

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

Meningkatkan pratinjau nilai inline 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 pengautentikasi dengan protokol ctap2 yang mendukung kunci tetap.

 Mendukung blob besar untuk pengautentikasi virtual

Masalah Chromium: 1321803

Pintasan keyboard baru di panel Sumber

Dua pintasan keyboard baru kini tersedia di panel Sumber:

  • Mengaktifkan/menonaktifkan sidebar navigasi (kiri) dengan Kontrol/Command + Shift + Y
  • Aktifkan/nonaktifkan sidebar debugger (kanan) dengan Control/Command + Shift + H

Pintasan keyboard baru untuk panel Sumber

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 proses debug secara keseluruhan:

  • Memperbaiki pemetaan antara lokasi dan offset untuk skrip inline dan lokasi sumber
  • Menggunakan informasi penggantian untuk lokasi teks bingkai
  • Menyelesaikan URL relatif dengan URL frame dengan benar

Masalah Chromium: 1319828, 1318635, 1305475

Mendownload saluran pratinjau

Sebaiknya gunakan 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 sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

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

Yang baru di DevTools

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