Yang Baru di DevTools (Chrome 98)

Jecelyn Yeen

Fitur pratinjau: Hierarki aksesibilitas halaman penuh

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

Di panel Elements, buka panel Accessibility dan 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 halaman 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 sekarang dipilih. Ini adalah cara yang bagus untuk memahami pemetaan antara node DOM dan node hierarki aksesibilitasnya. Ini juga berfungsi untuk tampilan hierarki DOM ⬌ Hierarki aksesibilitas.

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

Tim kami masih mengerjakan fitur pratinjau ini secara aktif. 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 dicetak dengan rapi secara otomatis.

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

Tab perubahan

Masalah Chromium: 1238818, 1268754 , 1086491

Menyetel waktu tunggu yang lebih lama untuk perekaman alur penggunaan

Kini 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 (memerlukan waktu 6 detik). Putar ulang alur penggunaan ini gagal karena melebihi 5 detik (waktu tunggu default).

Kita dapat menggunakan setelan Timeout baru untuk memperbaiki masalah ini. Luaskan langkah yang kita klik pada item menu. Edit langkah dengan Tambahkan waktu tunggu dan tetapkan ke 6000 milidetik (sama dengan 6 detik).

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

setelan waktu tunggu untuk perekaman alur penggunaan

Masalah Chromium: 1257499

Pastikan halaman Anda dapat disimpan dalam 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 cache kembali/maju 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 Properties, Anda kini dapat mengetik nama atau nilai properti di kotak teks Filter 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 minati dengan lebih cepat sehingga meningkatkan produktivitas Anda.

Filter panel properti

Masalah Chromium: 1269674

Emulasikan fitur media CSS paksa warna

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

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

Fitur media forced-colors CSS

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

Mendukung 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 memperluas semua hasil penelusuran

Pintasan keyboard untuk memutar ulang XHR di panel Jaringan

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

replay 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 pada satu waktu.

Buka tab penelusuran melalui Esc > menu 3 titik > Telusuri. Masukkan string penelusuran (misalnya, fungsi) dan 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 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`' yang unik, yang menunjukkan dua elemen, keduanya dengan `id` yang sama

Masalah Chromium: 772558

Panel Sumber yang ditingkatkan

Banyak peningkatan stabilitas di panel Sources saat kami mengupgradenya untuk menggunakan CodeMirror 6. Berikut adalah beberapa peningkatan penting:

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

Masalah Chromium: 1241848

Sorotan lainnya

Berikut beberapa perbaikan penting dalam rilis ini:

  • Menampilkan diagram waterfall permintaan jaringan dengan benar. Sebelumnya, gayanya rusak. (1275501)
  • Sorotan kode rusak saat menelusuri dokumen dengan baris yang sangat panjang di panel Sumber. Hal ini sekarang 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 dan statusnya.

Bagian Endpoint kini tersedia. Halaman ini memberi Anda ringkasan tentang 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

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 yang mutakhir, dan membantu 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.