Yang Baru di DevTools (Chrome 98)

Jecelyn Yeen

Fitur pratinjau: Hierarki aksesibilitas dalam layar penuh

Pohon aksesibilitas halaman penuh yang baru memudahkan Anda mendapatkan ringkasan pohon aksesibilitas halaman penuh dan membantu Anda lebih memahami cara konten web Anda ditampilkan ke teknologi pendukung.

Di panel Elements, buka panel Accessibility, lalu centang kotak Enable full-page accessibility tree. Kemudian, muat ulang DevTools dan Anda akan melihat tombol aksesibilitas baru di panel Elemen.

Anda dapat mengkliknya untuk beralih ke tampilan Hierarki aksesibilitas dalam layar penuh. Anda dapat meluaskan node atau mengklik untuk melihat detail di panel Aksesibilitas.

Pilih node dan beralih kembali ke tampilan hierarki DOM. Node DOM yang sesuai kini dipilih. Ini adalah cara yang bagus untuk memahami pemetaan antara node DOM dan node hierarki aksesibilitasnya. Hal ini juga berfungsi untuk tampilan hierarki DOM ⬌ hierarki Aksesibilitas.

Sebelumnya, hierarki aksesibilitas tersedia di panel Aksesibilitas. Tampilan terbatas, hanya memungkinkan Anda menjelajahi satu node dan ancestor-nya.

Tim kami masih berupaya secara aktif untuk meningkatkan kualitas fitur pratinjau ini. Kami mencari masukan Anda untuk peningkatan lebih lanjut.

Hierarki aksesibilitas dalam layar penuh

Masalah Chromium: 887173

Perubahan yang lebih akurat di tab Perubahan

Perubahan kode di tab Changes akan otomatis dicetak dengan rapi.

Sebelumnya, sulit untuk melacak perubahan sebenarnya pada kode sumber yang diminifikasi karena semua kode ditampilkan dalam satu baris.

Tab Perubahan

Masalah Chromium: 1238818, 1268754 , 1086491

Menetapkan waktu tunggu yang lebih lama untuk perekaman alur penggunaan

Sekarang Anda dapat menyesuaikan setelan Waktu tunggu habis di Perekam untuk semua langkah atau langkah tertentu. Hal ini berguna terutama untuk halaman dengan permintaan jaringan yang lambat dan animasi yang panjang.

Misalnya, saya merekam alur penggunaan di halaman demo ini untuk memuat dan mengklik item menu. Namun, pemuatan item menu lambat (membutuhkan waktu 6 detik). Pemutaran ulang alur pengguna ini gagal karena melebihi 5 detik (waktu tunggu default).

Kita dapat menggunakan setelan Waktu Tunggu yang baru untuk memperbaikinya. Luaskan langkah yang kita klik pada item menu. Edit langkah dengan Tambahkan waktu tunggu dan setel ke 6000 milidetik (setara dengan 6 detik).

Secara opsional, Anda dapat menyesuaikan Waktu tunggu habis di Setelan pemutaran ulang untuk semua langkah. Luaskan Setelan pemutaran ulang dan edit nilai Waktu tunggu.

Setelan waktu tunggu untuk perekaman alur pengguna

Masalah Chromium: 1257499

Memastikan halaman Anda dapat di-cache dengan tab Back/forward cache

Back-forward cache (atau bfcache) adalah pengoptimalan browser yang memungkinkan navigasi mundur dan maju secara instan.

Tab Cache kembali/maju yang baru dapat membantu Anda menguji halaman untuk memastikan halaman dioptimalkan untuk bfcache, dan mengidentifikasi masalah yang dapat mencegah halaman memenuhi syarat.

Untuk menguji halaman tertentu, buka halaman tersebut di Chrome, lalu di DevTools, buka Application > Back-forward Cache. Selanjutnya, klik tombol Uji back/forward cache dan DevTools akan mencoba menutup lalu membuka untuk menentukan apakah halaman dapat dipulihkan dari bfcache.

Sebagai developer web, Anda harus mengetahui cara mengoptimalkan halaman untuk bfcache di semua browser karena hal ini akan meningkatkan pengalaman penjelajahan secara signifikan bagi pengguna—terutama bagi mereka dengan jaringan atau perangkat yang lebih lambat.

Tab back-forward cache

Masalah Chromium: 1110752

Filter panel Properti baru

Jika ingin berfokus pada properti tertentu di panel Properti, Anda kini dapat mengetik nama atau nilai properti tersebut di kotak teks Filter yang baru.

Secara default, properti yang nilainya null atau undefined tidak ditampilkan. Aktifkan kotak centang Tampilkan semua untuk melihat semua properti.

Dengan peningkatan ini, Anda dapat membuka properti yang Anda kelola dengan lebih cepat sehingga meningkatkan produktivitas Anda.

Filter panel properti

Masalah Chromium: 1269674

Mengemulasi fitur media CSS forced-colors

Fitur media CSS forced-colors digunakan untuk mendeteksi apakah agen pengguna telah mengaktifkan mode warna paksa (misalnya, mode Kontras Tinggi Windows) yang menerapkan palet warna terbatas pilihan pengguna di halaman.

Buka Menu Perintah, jalankan perintah Show Rendering, lalu tetapkan dropdown Emulate CSS media feature forced-colors.

Fitur media CSS forced-colors

Masalah Chromium: 1130859

Perintah Tampilkan penggaris saat mengarahkan kursor

Sekarang Anda dapat membuka Menu Perintah dan menjalankan perintah Tampilkan penggaris saat mengarahkan kursor. Penggaris halaman mempermudah pengukuran lebar dan tinggi elemen.

Sebelumnya, Anda hanya dapat mengaktifkan penggaris halaman melalui kotak centang Setelan > Tampilkan penggaris.

Perintah Tampilkan penggaris saat mengarahkan kursor

Masalah Chromium: 1270562

Dukungan row-reverse dan column-reverse di editor Flexbox

Editor Flexbox menambahkan dua tombol baru untuk mendukung row-reverse dan column-reverse di flex-direction.

Editor Flexbox

Masalah Chromium: 1263866

Pintasan keyboard baru untuk memutar ulang XHR dan meluaskan semua hasil penelusuran

Pintasan keyboard untuk memutar ulang XHR di panel Jaringan

Pilih permintaan XHR di panel Network, lalu tekan R di keyboard untuk memutar ulang XHR. Sebelumnya, Anda hanya dapat memutar ulang XHR melalui menu konteks (klik kanan > Putar Ulang XHR)

memutar ulang XHR

Masalah Chromium: 1050021

Pintasan keyboard untuk meluaskan semua hasil penelusuran

Pintasan baru ditambahkan di tab Penelusuran yang memungkinkan Anda meluaskan dan menciutkan semua hasil penelusuran. Sebelumnya, Anda hanya dapat meluaskan dan menciutkan hasil penelusuran dengan mengklik satu file dalam satu waktu.

Buka tab penelusuran melalui Esc > menu 3 titik > Penelusuran. Masukkan string penelusuran (misalnya, fungsi), lalu tekan Enter untuk melihat daftar hasil penelusuran. Fokus pada hasil penelusuran dan gunakan pintasan berikut untuk meluaskan/menciutkan file penelusuran:

  • Windows / Linux - Ctrl + Shift + { atau }
  • MacOS - Cmd + Options + { atau }

Buka pintasan keyboard untuk melihat referensi pintasan keyboard di Chrome DevTools.

Masalah Chromium: 1255073

Lighthouse 9 di panel Lighthouse

Panel Lighthouse kini menjalankan Lighthouse 9. Lighthouse kini akan mencantumkan semua elemen yang memiliki ID yang sama.

ID elemen yang tidak unik adalah masalah aksesibilitas umum. Misalnya, ID yang dirujuk dalam atribut aria-labelledby digunakan di beberapa elemen.

Lihat Yang baru di Lighthouse 9.0 untuk mengetahui detail selengkapnya tentang update ini.

​Audit Lighthouse untuk 'Semua elemen yang dapat difokuskan harus memiliki `id` unik', yang menampilkan dua elemen, keduanya dengan `id` yang sama

Masalah Chromium: 772558

Panel Sumber yang ditingkatkan

Banyak peningkatan stabilitas di panel Sumber saat kami mengupgrade-nya untuk menggunakan CodeMirror 6. Berikut beberapa peningkatan penting:

  • Jauh lebih cepat saat membuka file berukuran besar (misalnya, WASM, JavaScript)
  • Tidak ada lagi scrolling acak saat menelusuri kode
  • Peningkatan saran pelengkapan otomatis untuk sumber yang dapat diedit (misalnya, cuplikan, penggantian lokal)

Masalah Chromium: 1241848

Sorotan lain-lain

Berikut beberapa perbaikan penting dalam rilis ini:

  • Menampilkan diagram waterfall permintaan jaringan dengan benar. Sebelumnya, gaya rusak. (1275501)
  • Penyorotan kode rusak saat menelusuri dokumen dengan baris yang sangat panjang di panel Sumber. Sekarang sudah diperbaiki. (1275496)
  • Tidak ada lagi tab Payload duplikat dalam permintaan jaringan. (1273972)
  • Memperbaiki detail pergeseran tata letak yang tidak ada di bagian Ringkasan pada panel Performa. (1259606)
  • Mendukung karakter arbitrer (misalnya, ,, .), dalam kueri Penelusuran Jaringan. (1267196)

[Eksperimental] Endpoint di panel Reporting API

Panel Reporting API eksperimental diperkenalkan di Chrome 96 untuk membantu Anda memantau laporan yang dibuat di halaman Anda dan statusnya.

Bagian Endpoints kini tersedia. Bagian ini memberi Anda ringkasan semua endpoint yang dikonfigurasi di header Reporting-Endpoints.

Pelajari cara menggunakan Reporting API untuk memantau pelanggaran keamanan, panggilan API yang tidak digunakan lagi, dan lainnya.

Panel Reporting API

Masalah Chromium: 1200732

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.