Menjelajahi Chrome DevTools dengan teknologi pendukung

Rob Dodson

Panduan ini bertujuan untuk membantu pengguna yang terutama mengandalkan teknologi pendukung seperti pembaca layar mengakses dan menggunakan Chrome DevTools. Chrome DevTools adalah serangkaian alat developer web yang terintegrasi ke dalam browser Google Chrome. Lihat Referensi Aksesibilitas jika Anda mencari fitur DevTools yang terkait dengan peningkatan aksesibilitas halaman web.

Aksesibilitas DevTools masih dalam proses. Beberapa panel dan tab berfungsi lebih baik dengan teknologi bantuan daripada yang lain. Panduan ini memandu Anda melalui panel yang paling mudah diakses dan menyoroti masalah tertentu yang mungkin Anda temui di sepanjang proses.

Ringkasan

Sebelum memulai, sebaiknya Anda memiliki model mental tentang struktur UI DevTools. DevTools dibagi menjadi serangkaian panel yang disusun menjadi ARIA tablist. Contoh:

  • Panel Elemen memungkinkan Anda melihat dan mengubah node DOM atau CSS.
  • Panel Konsol memungkinkan Anda membaca log JavaScript dan mengedit objek secara langsung.

Dalam area konten setiap panel, terdapat sejumlah alat yang berbeda, yang sering disebut sebagai tab atau panel dalam dokumentasi. Misalnya, panel Elemen berisi tab tambahan untuk memeriksa pemroses peristiwa, hierarki aksesibilitas, dan banyak lagi. Perbedaan antara tab dan panel agak arbitrer. Satu-satunya alasan Anda akan melihat istilah ini atau istilah lainnya adalah untuk mempertahankan konsistensi dengan dokumentasi DevTools resmi lainnya.

Pintasan keyboard

Referensi Pintasan Keyboard DevTools adalah tips praktis yang berguna. Pastikan untuk mem-bookmark dan membukanya kembali saat Anda menjelajahi berbagai panel.

Membuka DevTools

Untuk memulai, baca Membuka Chrome DevTools. Ada sejumlah cara untuk membuka DevTools, baik melalui pintasan keyboard maupun item menu.

Beralih antarpanel

Menavigasi dengan keyboard

  • Dengan DevTools terbuka, tekan Control+] atau Command+] (Mac) untuk memfokuskan panel berikutnya.
  • Tekan Control+[ atau Command+[ (Mac) untuk memfokuskan panel sebelumnya.
  • Anda juga dapat menggunakan Shift+Tab untuk memindahkan fokus ke tablist panel dan menggunakan tombol panah untuk mengubah panel, meskipun mungkin lebih cepat menggunakan pintasan yang disebutkan sebelumnya.

Masalah umum

  • Beberapa panel, seperti panel Console dan Performance, dapat memindahkan fokus ke area kontennya segera setelah diaktifkan. Hal ini dapat menyulitkan navigasi dengan tombol panah.
  • Nama panel yang dipilih akan diumumkan, tetapi hanya setelah membaca konten yang difokuskan di panel. Hal ini dapat membuat Anda sangat mudah melewatkan.

Menavigasi dengan Menu Perintah

Untuk memfokuskan panel tertentu, gunakan Menu Perintah:

  1. Dengan DevTools terbuka, tekan Control+Shift+P atau Command+Shift+P (Mac) untuk membuka Command Menu. Menu Perintah adalah combobox pelengkapan otomatis penelusuran fuzzy.
  2. Ketik nama panel yang ingin dibuka, lalu gunakan keyboard Panah Bawah untuk membuka opsi yang benar.
  3. Tekan Enter untuk menjalankan perintah.

Misalnya, untuk membuka panel Elements:

  1. Buka Menu Perintah.
  2. Ketik E, lalu L. Opsi Panel > Tampilkan Elemen dipilih.
  3. Tekan Enter untuk menjalankan perintah yang membuka panel.

Membuka panel dengan cara ini akan mengarahkan fokus ke konten panel itu sendiri. Untuk panel Elemen, fokus akan berpindah ke Hierarki DOM.

Panel elemen

Memeriksa elemen di halaman

  1. Buka elemen yang ingin Anda periksa menggunakan kursor pembaca layar.
  2. Simulasikan klik kanan mouse pada elemen untuk membuka menu konteks.
  3. Pilih opsi Periksa. Tindakan ini akan membuka panel Elements dan memfokuskan elemen di DOM Tree.

Hierarki DOM disusun sebagai ARIA tree. Lihat Menavigasi Hierarki DOM dengan keyboard untuk mengetahui contohnya.

Menyalin kode untuk elemen dalam Hierarki DOM

  1. Dengan fokus pada node di Hierarki DOM, tampilkan menu konteks klik kanan.
  2. Luaskan opsi Salin.
  3. Pilih Salin outerHTML.

Masalah umum

  • Salin outerHTML sering kali tidak memilih node saat ini, tetapi memilih node induknya. Namun, konten elemen harus tetap berada di outerHTML yang disalin.

Mengubah atribut elemen di Hierarki DOM

  • Dengan fokus pada node di Hierarki DOM, tekan Enter untuk membuatnya dapat diedit.
  • Tekan Tab untuk berpindah di antara nilai atribut. Saat Anda mendengar "spasi", Anda berada di dalam input teks kosong dan dapat mengetik nilai atribut baru.
  • Tekan Control+Enter atau Command+Enter (Mac) untuk menerima perubahan dan mendengarkan seluruh konten elemen.

Masalah umum

  • Saat mengetik di input teks, Anda tidak akan mendapatkan masukan. Jika Anda melakukan kesalahan ketik dan menggunakan tombol panah untuk menjelajahi input, Anda juga tidak akan mendapatkan masukan. Cara termudah untuk memeriksa pekerjaan Anda adalah dengan menerima perubahan, lalu memproses seluruh elemen yang akan diumumkan.

Mengedit HTML elemen di Hierarki DOM

  • Dengan fokus pada node di Hierarki DOM, tekan Enter untuk membuatnya dapat diedit.
  • Tekan Tab untuk berpindah di antara nilai atribut. Saat mendengar nama elemen, misalnya, "h2", Anda berada di dalam input teks dan dapat mengubah jenis elemen.
  • Tekan Control+Enter atau Command+Enter (Mac) untuk menyetujui perubahan.

Misalnya, mengetik h3 dan menekan Control+Enter atau Command+Enter (Mac) akan mengubah tag awal dan akhir elemen menjadi h3.

Tab panel Elemen

Panel Elemen berisi tab tambahan untuk memeriksa hal-hal seperti CSS yang diterapkan ke elemen atau tempatnya dalam hierarki aksesibilitas.

  • Dengan fokus pada node di Hierarki DOM, tekan Tab hingga Anda mendengar bahwa panel Gaya dipilih.
  • Gunakan Panah Kanan untuk menjelajahi tab lain yang tersedia.

Hierarki DOM mengubah elemen dengan atribut href menjadi link yang dapat difokuskan, sehingga Anda mungkin perlu menekan Tab lebih dari sekali untuk membuka panel Gaya.

Masalah umum

Tab DOM Breakpoints dan Properties tidak dapat diakses dengan keyboard.

Panel gaya

Di panel Gaya, Anda akan menemukan kontrol untuk memfilter gaya, mengalihkan status elemen (seperti :active dan :focus), mengalihkan class, dan menambahkan class baru. Ada juga alat pemeriksaan gaya yang canggih untuk menjelajahi dan mengubah gaya yang saat ini diterapkan ke elemen yang difokuskan di Hierarki DOM.

Konsep utama yang perlu dipahami tentang panel Gaya adalah panel ini hanya menampilkan gaya untuk node yang saat ini dipilih di Hierarki DOM. Misalnya, Anda telah selesai memeriksa gaya node <header>, dan sekarang Anda ingin melihat gaya untuk node <footer>. Untuk melakukannya, Anda harus memilih node <footer> terlebih dahulu di Hierarki DOM. Anda mungkin merasa lebih cepat menggunakan alur kerja Periksa untuk memeriksa node yang berada di sekitar node footer (seperti link dalam footer), yang memfokuskan Hierarki DOM, lalu menggunakan keyboard untuk membuka node yang tepat yang Anda minati.

Menavigasi panel Gaya

Karena semua alat gaya terhubung dengan cara tertentu kembali ke panel Gaya, sebaiknya Anda menjadi ahli dalam alat ini terlebih dahulu.

  • Dengan fokus pada panel Gaya, tekan Tab untuk memindahkan fokus ke dalam dan menjelajahi kontennya.
  • Tekan Tab hingga gaya pertama menjadi aktif. Jika Anda menggunakan pembaca layar, gaya pertama ini akan diumumkan sebagai "element.style {}".
  • Tekan Panah Bawah untuk menjelajahi daftar gaya berdasarkan tingkat kekhususannya. Pembaca layar mengumumkan setiap gaya yang dimulai dengan nama file CSS, nomor baris tempat gaya muncul, dan nama gaya itu sendiri. Misalnya: "main.css:233 .card__img {}"
  • Tekan Enter untuk memeriksa gaya secara lebih mendetail. Fokus dimulai pada versi nama gaya yang dapat diedit.
  • Tekan Tab untuk berpindah di antara versi yang dapat diedit dari setiap properti CSS dan nilai yang sesuai. Di akhir setiap blok gaya terdapat kolom teks kosong yang dapat diedit yang dapat Anda gunakan untuk menambahkan properti CSS tambahan.
  • Anda dapat terus menekan Tab untuk berpindah antar-daftar gaya, atau menekan Escape untuk keluar dari mode ini dan kembali menavigasi dengan tombol panah.

Pastikan untuk membaca referensi keyboard panel Gaya untuk pintasan tambahan.

Masalah Umum
  • Jika menggunakan kolom teks Filter yang dapat diedit, Anda tidak akan dapat lagi membuka daftar gaya.

Mengalihkan status elemen

Untuk mengalihkan status elemen, seperti :active atau :focus:

  1. Buka panel Gaya, lalu tekan Tab hingga tombol Toggle Element State memiliki fokus.
  2. Tekan Enter untuk meluaskan koleksi status elemen. Status elemen ditampilkan sebagai grup kotak centang.
  3. Tekan Tab hingga status pertama, :active, memiliki fokus.
  4. Tekan Spasi untuk mengaktifkannya. Jika elemen yang saat ini dipilih di Hierarki DOM memiliki gaya :active, gaya tersebut sekarang akan diterapkan.
  5. Tekan terus Tab untuk menjelajahi semua status yang tersedia.

Menambahkan class yang sudah ada

Di samping tombol Alihkan Status Elemen adalah tombol Class Elemen. Pindahkan fokus ke tombol tersebut dengan menekan Tab, lalu Enter. Fokus berpindah ke kolom teks edit berlabel Tambahkan Kelas Baru.

Tombol Element Classes terutama digunakan untuk menambahkan class yang ada ke elemen. Misalnya, jika stylesheet Anda berisi class helper bernama .clearfix, Anda dapat menekan . di dalam kolom teks edit untuk melihat daftar saran class dan menggunakan Panah Bawah untuk menemukan saran .clearfix. Atau, ketik nama class sendiri dan tekan Enter untuk menerapkannya.

Menambahkan aturan gaya baru

Di samping tombol Element Classes adalah tombol New Style Rule. Pindahkan fokus ke sana dengan menekan Tab, lalu tekan Enter. Fokus berpindah ke kolom teks yang dapat diedit di dalam inspector gaya. Konten teks awal kolom adalah nama tag elemen yang dipilih di Hierarki DOM. Anda dapat mengetik nama class yang diinginkan ke dalam kolom ini, lalu menekan Tab untuk menetapkan properti CSS ke class tersebut.

Tab Dihitung

Dengan fokus pada tab Computed, tekan Tab untuk memindahkan fokus ke dalam dan menjelajahi kontennya. Dalam tab Computed, terdapat kontrol untuk mempelajari properti CSS mana yang sebenarnya diterapkan ke elemen dalam urutan kekhususan.

Menjelajahi semua gaya komputasi

Tekan Tab hingga Anda mencapai kumpulan gaya yang dihitung. Hal ini ditampilkan sebagai ARIA tree. Memperluas kotak daftar akan menampilkan pemilih CSS mana yang menerapkan gaya yang dihitung. Pemilih ini diatur berdasarkan kekhususan. Pembaca layar mengumumkan nilai yang dihitung, pemilih CSS yang saat ini cocok, nama file stylesheet yang berisi pemilih, dan nomor baris untuk pemilih.

Masalah umum

  • Jika menggunakan kolom teks Filter, Anda tidak akan dapat lagi memeriksa gaya.

Tab pemroses peristiwa

Dari dalam panel Elemen, Anda dapat memeriksa pemroses peristiwa yang diterapkan ke elemen menggunakan tab Pemroses Peristiwa. Dengan fokus pada panel Gaya, tekan Panah Kanan untuk membuka tab Pemroses Peristiwa.

Menjelajahi pemroses peristiwa

Pemroses peristiwa ditampilkan sebagai tree ARIA. Anda dapat menggunakan tombol panah untuk membukanya. Pembaca layar mengumumkan nama objek DOM tempat pemroses peristiwa dilampirkan, serta nama file tempat pemroses peristiwa ditentukan dan nomor barisnya.

Panel aksesibilitas

Dengan fokus pada panel Aksesibilitas, tekan Tab untuk memindahkan fokus ke dalam dan menjelajahi kontennya. Dalam panel Accessibility, terdapat kontrol untuk menjelajahi hierarki aksesibilitas, atribut ARIA yang diterapkan ke elemen, dan properti aksesibilitas yang dihitung.

Hierarki Aksesibilitas

Hierarki Aksesibilitas ditampilkan sebagai tree ARIA dengan setiap treeitem sesuai dengan elemen di DOM. Hierarki mengumumkan peran yang dihitung untuk node yang dipilih. Elemen umum seperti div dan span diumumkan sebagai "GenericContainer" dalam hierarki. Gunakan tombol panah untuk melintasi hierarki dan mempelajari hubungan induk-turunan.

Masalah umum

  • Jenis hierarki ARIA yang digunakan oleh panel Aksesibilitas mungkin tidak ditampilkan dengan benar di Chrome untuk pembaca layar macOS seperti VoiceOver. Berlangganan Masalah Chromium #868480 untuk mendapatkan informasi tentang progres masalah ini.
  • Bagian Atribut ARIA dan Properti Komputasi ditandai sebagai hierarki ARIA, tetapi saat ini tidak memiliki pengelolaan fokus sehingga tidak dapat dioperasikan dengan keyboard.

Panel Audit

Panel Audit memungkinkan Anda menjalankan serangkaian pengujian terhadap situs untuk memeriksa masalah umum terkait performa, aksesibilitas, SEO, dan sejumlah kategori lainnya.

Mengonfigurasi dan menjalankan audit

  1. Saat panel Audit pertama kali dibuka, fokus akan ditempatkan pada tombol Jalankan Audit di akhir formulir. Secara default, formulir dikonfigurasi untuk menjalankan audit untuk setiap kategori menggunakan emulasi seluler pada simulasi koneksi 3G.
  2. Gunakan Shift+Tab atau kembali ke mode Jelajah untuk mengubah setelan audit.
  3. Jika Anda siap menjalankan audit, kembali ke tombol Jalankan Audit dan tekan Enter.
  4. Fokus akan berpindah ke jendela modal dengan tombol Batal yang memungkinkan Anda keluar dari audit. Anda mungkin mendengar serangkaian earcon saat audit berjalan dan memuat ulang halaman beberapa kali.

Masalah umum

  • Bagian-bagian yang berbeda dari formulir konfigurasi saat ini tidak ditandai dengan elemen fieldset. Anda mungkin lebih mudah menavigasinya dalam mode Jelajahi untuk mengetahui kontrol mana yang terkait dengan setiap bagian.
  • Tidak ada pengumuman wilayah live atau earcon saat audit selesai berjalan. Umumnya, proses ini memerlukan waktu sekitar 30 detik, setelah itu Anda akan dapat membuka hasil. Menggunakan mode Jelajah mungkin merupakan cara termudah untuk mencapai hasil.

Menavigasi laporan audit

Laporan audit disusun ke dalam beberapa bagian yang sesuai dengan setiap kategori audit. Laporan ini akan terbuka dengan daftar skor untuk setiap kategori. Skor ini juga merupakan link yang dapat digunakan untuk langsung ke bagian yang relevan. Dalam setiap bagian terdapat elemen details yang dapat diluaskan, yang berisi informasi terkait audit yang lulus atau gagal. Secara default, hanya audit yang gagal yang ditampilkan. Setiap bagian diakhiri dengan elemen details akhir yang berisi semua audit yang lulus.

Untuk menjalankan audit baru, gunakan Shift+Tab untuk keluar dari laporan dan cari tombol Lakukan Audit.