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 penuh dan membantu Anda lebih memahami bagaimana konten web Anda terekspos pada 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 Elemen.

Anda dapat mengkliknya untuk beralih ke tampilan Hierarki aksesibilitas halaman penuh. Anda dapat meluaskan node atau klik untuk melihat detail di panel Aksesibilitas.

Pilih node, lalu alihkan kembali ke tampilan hierarki DOM. Simpul DOM yang sesuai dipilih sekarang. Ini adalah cara yang bagus untuk memahami pemetaan antara node DOM dan node hierarki aksesibilitasnya. Ini juga berfungsi untuk hierarki DOM ⬌ Tampilan hierarki aksesibilitas!

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

Tim kami masih terus mengerjakan fitur pratinjau ini. Kami menantikan masukan Anda untuk peningkatan lebih lanjut.

Hierarki aksesibilitas halaman penuh

Masalah Chromium: 887173

Perubahan yang lebih tepat di tab Perubahan

Perubahan kode di tab Perubahan sudah dicetak dengan 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

Menyetel waktu tunggu yang lebih lama untuk perekaman alur penggunaan

Kini Anda dapat menyesuaikan setelan Waktu tunggu 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 dimuat 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 Timeout baru untuk memperbaiki masalah ini. Luaskan langkah yang kita klik pada item menu. Edit langkah dengan Add waktu tunggu dan tetapkan ke 6.000 milidetik (sama dengan 6 dtk).

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

setelan waktu tunggu untuk pencatatan alur pengguna

Masalah Chromium: 1257499

Pastikan halaman Anda dapat di-cache dengan tab Back-forward cache

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

Tab Back/forward cache yang baru dapat membantu Anda menguji halaman guna memastikan halaman telah dioptimalkan untuk bfcache, dan mengidentifikasi masalah yang mungkin mencegahnya memenuhi syarat.

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

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

Peningkatan ini memungkinkan Anda menemukan properti yang Anda inginkan dengan lebih cepat sehingga meningkatkan produktivitas Anda!

Filter panel properti

Masalah Chromium: 1269674

Emulasikan fitur media CSS paksa warna

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

Buka Menu Perintah, jalankan perintah Show Rendering, lalu setel dropdown Emulate CSS media feature forces.

Fitur media CSS paksa warna

Masalah Chromium: 1130859

Tampilkan penggaris pada perintah pengarahan kursor

Anda kini dapat membuka Menu Perintah dan menjalankan perintah Tampilkan penggaris saat kursor diarahkan. 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

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 > Putar ulang XHR)

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

Buka tab penelusuran melalui Esc > menu 3-dot > Telusuri. 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 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 non-unik merupakan masalah aksesibilitas yang umum. Misalnya, ID yang dirujuk dalam atribut aria-labelledby digunakan pada beberapa elemen.

Lihat Yang baru di Lighthouse 9.0 untuk detail selengkapnya tentang pembaruan tersebut.

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 scrolling acak saat melihat-lihat 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, gayanya rusak. (1275501)
Sorotan kode rusak saat menelusuri dokumen dengan baris yang sangat panjang di panel Sources. Hal ini sekarang diperbaiki. (1275496)
Tidak ada lagi tab Payload duplikat dalam permintaan jaringan. (1273972)
Memperbaiki detail pergeseran tata letak yang hilang di bagian Summary pada panel Performance. (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. Bagian 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 mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait 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.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.