Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 98)

Jecelyn Yeen

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

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

Anda dapat mengkliknya untuk beralih ke tampilan Hierarki aksesibilitas halaman penuh. Anda dapat meluaskan node atau mengklik untuk melihat detailnya di panel Accessibility.

Pilih sebuah simpul dan kembalikan ke tampilan hierarki DOM. Node DOM yang sesuai dipilih sekarang. Inilah cara yang bagus untuk memahami pemetaan antara simpul DOM dan simpul hierarki aksesibilitasnya. Ini juga berfungsi untuk hierarki DOM ⬌ Tampilan hierarki aksesibilitas.

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

Tim kami masih secara aktif mengerjakan fitur pratinjau ini. Kami menantikan masukan Anda untuk penyempurnaan lebih lanjut.

Hierarki aksesibilitas satu halaman penuh

Masalah Chromium: 887173

Perubahan yang lebih tepat di tab Perubahan

Perubahan kode di tab Perubahan akan dicetak cukup baik secara otomatis.

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 di Perekam untuk semua langkah atau langkah tertentu. Hal ini sangat berguna terutama untuk halaman dengan permintaan jaringan yang lambat dan animasi yang panjang.

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

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

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

setelan waktu tunggu untuk perekaman alur penggunaan

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 Back/forward cache yang baru dapat membantu Anda menguji halaman guna memastikan halaman dioptimalkan untuk bfcache, dan mengidentifikasi masalah yang mungkin 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 keluar dan kembali untuk menentukan apakah halaman dapat dipulihkan dari bfcache.

Sebagai developer web, mengetahui cara mengoptimalkan halaman untuk bfcache di semua browser sangatlah penting karena hal ini akan meningkatkan pengalaman penjelajahan secara signifikan bagi pengguna—terutama mereka yang memiliki 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 akan ditampilkan. Aktifkan kotak centang Tampilkan semua untuk melihat semua properti.

Peningkatan ini memungkinkan Anda mengakses properti yang Anda inginkan dengan lebih cepat dan dengan demikian meningkatkan produktivitas Anda!

Filter panel properti

Masalah Chromium: 1269674

Mengemulasi fitur media CSS yang diberi warna paksa

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

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

Fitur media CSS pewarnaan paksa

Masalah Chromium: 1130859

Tampilkan penggaris pada perintah pengarahan kursor

Sekarang Anda dapat membuka Command Menu dan menjalankan perintah Show rulers on hover. Penggaris halaman memudahkan pengukuran lebar dan tinggi elemen.

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

Tampilkan penggaris pada perintah pengarahan kursor

Masalah Chromium: 1270562

Dukung `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 di keyboard untuk memutar ulang XHR. Sebelumnya, Anda hanya dapat memutar ulang XHR melalui menu konteks (klik kanan > Replay XHR)

putar ulang XHR

Masalah Chromium: 1050021

Pintasan keyboard untuk meluaskan semua hasil penelusuran

Pintasan baru ditambahkan di tab Penelusuran agar Anda dapat meluaskan dan menciutkan semua hasil penelusuran. Sebelumnya, Anda hanya dapat meluaskan dan menciutkan hasil penelusuran dengan mengklik file satu per satu.

Buka tab penelusuran melalui Esc > menu 3 titik > Telusuri. Masukkan string penelusuran (misalnya, fungsi) dan tekan Enter untuk melihat daftar hasil penelusuran. Fokuskan 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 sekarang menjalankan Lighthouse 9. Lighthouse sekarang akan mencantumkan semua elemen dengan ID yang sama.

ID elemen 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 detail selengkapnya tentang pembaruan 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 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 menelusuri kode
Saran pelengkapan otomatis yang ditingkatkan untuk sumber yang dapat diedit (misalnya cuplikan, penggantian lokal)

Masalah Chromium: 1241848

Sorotan lain-lain

Berikut adalah beberapa perbaikan penting dalam rilis ini:

Menampilkan diagram waterfall permintaan jaringan dengan benar. Sebelumnya, gaya rusak. (1275501)
Sorotan kode rusak saat menelusuri dokumen dengan baris yang sangat panjang di panel Sources. Masalah ini sekarang telah diperbaiki. (1275496)
Tidak ada lagi tab Payload duplikat di permintaan jaringan. (1273972)
Memperbaiki detail pergeseran tata letak yang tidak ada di bagian Ringkasan pada panel Performa. (1259606)
Mendukung karakter arbitrer (misalnya, ,, .), di kueri Network Search. (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 beserta statusnya.

Bagian Endpoint kini tersedia. 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

Pertimbangkan untuk menggunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, menguji API platform web tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan dengan DevTools.

Kirim saran atau masukan kepada kami melalui crbug.com.
Laporkan masalah DevTools menggunakan Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.