Menjelajahi Chrome DevTools dengan teknologi pendukung

Robby Dodson

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

Aksesibilitas DevTools sedang dalam proses. Beberapa panel dan tab bekerja lebih baik dengan teknologi asistif daripada yang lain. Panduan ini memandu Anda memahami panel yang paling mudah diakses dan menyoroti masalah tertentu yang mungkin Anda temui.

Ringkasan

Sebelum memulai, ada baiknya memiliki model mental tentang bagaimana UI DevTools terstruktur. DevTools dibagi menjadi serangkaian panel yang diatur menjadi ARIA tablist. Contoh:

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

Dalam area konten setiap panel, ada sejumlah alat yang berbeda yang sering disebut sebagai tab atau panel dalam dokumentasi. Misalnya, panel Elements 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 satu istilah atau istilah lainnya adalah untuk menjaga konsistensi dengan dokumentasi DevTools resmi lainnya.

Pintasan keyboard

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

Buka DevTools

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

Menavigasi antarpanel

Menavigasi dengan keyboard

  • Saat 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 gunakan tombol panah untuk mengubah panel, meskipun mungkin akan lebih cepat jika menggunakan pintasan yang disebutkan sebelumnya.

Masalah umum

  • Beberapa panel, seperti panel Konsol dan Performa, dapat memindahkan fokus ke area kontennya segera setelah diaktifkan. Hal ini dapat mempersulit navigasi dengan tombol panah.
  • Nama panel yang dipilih akan diumumkan, tetapi hanya setelah panel membaca konten yang difokuskan di panel. Hal ini dapat membuat data sangat mudah terlewatkan.

Menavigasi menurut Menu Perintah

Untuk memfokuskan panel tertentu, gunakan Menu Perintah:

  1. Saat DevTools terbuka, tekan Control+Shift+P atau Command+Shift+P (Mac) untuk membuka Menu Perintah. Menu Perintah adalah kombobox 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 Elemen:

  1. Buka Menu Perintah.
  2. Ketik E lalu L. Opsi Panel > Show Elements 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 Elements, fokus akan berpindah ke DOM Tree.

Panel elemen

Memeriksa elemen pada halaman

  1. Buka elemen yang ingin Anda periksa menggunakan kursor pembaca layar.
  2. Menyimulasikan 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.

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

Menyalin kode untuk elemen di Hierarki DOM

  1. Dengan fokus pada node di DOM Tree, tampilkan menu konteks klik kanan.
  2. Perluas opsi Copy.
  3. Pilih Copy outerHTML.

Masalah umum

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

Mengubah atribut elemen di Hierarki DOM

  • Dengan fokus pada node di DOM Tree, tekan Enter agar dapat diedit.
  • Tekan Tab untuk berpindah di antara nilai atribut. Saat 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 input teks, Anda tidak mendapatkan masukan. Jika Anda salah ketik dan menggunakan tombol panah untuk mempelajari masukan, Anda juga tidak akan mendapatkan {i>feedback<i}. Cara termudah untuk memeriksa pekerjaan Anda adalah dengan menerima perubahan, lalu memproses seluruh elemen untuk diumumkan.

Mengedit HTML elemen di Hierarki DOM

  • Dengan fokus pada node di DOM Tree, tekan Enter agar 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 tersebut.
  • Tekan Control+Enter atau Command+Enter (Mac) untuk menerima 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 Elements berisi tab tambahan untuk memeriksa hal-hal seperti CSS yang diterapkan pada elemen atau tempatnya di hierarki aksesibilitas.

  • Dengan fokus pada node di DOM Tree, tekan Tab sampai Anda mendengar bahwa panel Styles telah dipilih.
  • Gunakan Panah Kanan untuk menjelajahi tab lain yang tersedia.

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

Masalah umum

Tab DOM Breakpoints dan Properties tidak dapat diakses dari keyboard.

Panel gaya

Di panel Styles, Anda akan menemukan kontrol untuk memfilter gaya, mengganti status elemen (seperti :active dan :focus), mengganti class, dan menambahkan class baru. Terdapat juga alat pemeriksaan gaya yang canggih untuk mempelajari dan mengubah gaya yang saat ini diterapkan pada elemen yang sedang difokuskan dalam DOM Tree.

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

Menavigasi panel Styles

Karena semua alat gaya terhubung dengan satu atau lain cara kembali ke panel Styles, sebaiknya Anda menjadi pakar alat ini terlebih dahulu.

  • Dengan fokus pada panel Styles, tekan Tab untuk memindahkan fokus di 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 melihat daftar gaya sesuai urutan kekhususannya. Pembaca layar mengumumkan setiap gaya, yang dimulai dengan nama file CSS, nomor baris tempat gaya ditampilkan, 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 antara versi yang dapat diedit dari setiap properti CSS dan nilainya yang sesuai. Di akhir setiap blok gaya terdapat kolom teks kosong yang dapat diedit dan dapat Anda gunakan untuk menambahkan properti CSS tambahan.
  • Anda dapat terus menekan Tab untuk berpindah dalam daftar gaya, atau menekan Escape untuk keluar dari mode ini dan kembali untuk menavigasi dengan tombol panah.

Pastikan Anda membaca referensi keyboard panel Styles untuk mengetahui pintasan tambahan.

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

Beralih status elemen

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

  1. Buka panel Styles dan tekan Tab hingga tombol Toggle Element State memiliki fokus.
  2. Tekan Enter untuk memperluas kumpulan status elemen. Status elemen ditampilkan sebagai kelompok kotak centang.
  3. Tekan Tab hingga status pertama, :active, memiliki fokus.
  4. Tekan Spasi untuk mengaktifkannya. Jika elemen yang saat ini dipilih dalam Hierarki DOM memiliki gaya :active, elemen tersebut kini akan diterapkan.
  5. Terus tekan Tab untuk menjelajahi semua status yang tersedia.

Menambahkan class yang keluar

Di sebelah tombol Toggle Element State terdapat tombol Element Classes. Pindahkan fokus ke tab tersebut dengan menekan Tab lalu Enter. Fokus akan berpindah ke kolom teks edit dengan label Add New Class.

Tombol Element Classes terutama digunakan untuk menambahkan class yang sudah 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 kelas Anda sendiri, lalu tekan Enter untuk menerapkannya.

Tambahkan aturan gaya baru

Di sebelah tombol Element Classes terdapat tombol New Style Rule. Pindahkan fokus ke tab tersebut dengan menekan Tab, lalu tekan Enter. Fokus akan berpindah ke kolom teks yang dapat diedit di dalam style inspector. Konten teks awal kolom adalah nama tag elemen yang dipilih dalam Hierarki DOM. Anda dapat mengetikkan nama class apa pun yang diinginkan ke kolom ini, lalu menekan Tab untuk menetapkan properti CSS ke dalamnya.

Tab Compute

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 benar-benar diterapkan ke elemen sesuai urutan kekhususannya.

Mempelajari semua gaya terkomputasi

Tekan Tab sampai Anda mencapai kumpulan gaya terkomputasi. Hal ini ditampilkan sebagai ARIA tree. Memperluas kotak daftar akan menampilkan pemilih CSS mana yang menerapkan gaya komputasi. Pemilih ini diatur berdasarkan kekhususan. Pembaca layar mengumumkan nilai yang dihitung, pemilih CSS yang saat ini cocok dengan 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 pada elemen menggunakan tab Pemroses Peristiwa. Dengan fokus pada panel Styles, tekan Panah Kanan untuk membuka tab Pemroses Peristiwa.

Menjelajahi pemroses peristiwa

Pemroses peristiwa disajikan sebagai tree ARIA. Anda dapat menggunakan tombol panah untuk menjelajahinya. 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 di dalam dan menjelajahi kontennya. Dalam panel Accessibility, terdapat kontrol untuk menjelajahi hierarki aksesibilitas, atribut ARIA yang diterapkan pada suatu elemen, dan properti aksesibilitas terkomputasinya.

Hierarki Aksesibilitas

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

Masalah umum

  • Jenis hierarki ARIA yang digunakan oleh panel Accessibility mungkin tidak ditampilkan dengan benar di Chrome untuk pembaca layar macOS seperti VoiceOver. Berlangganan ke masalah Chromium #868480 untuk mendapatkan informasi tentang progres masalah ini.
  • Bagian Atribut ARIA dan Properti Terkomputasi 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 Audits pertama kali dibuka, fokus akan ditempatkan pada tombol Run Audit di akhir formulir. Secara default, formulir dikonfigurasi untuk menjalankan audit bagi setiap kategori menggunakan emulasi seluler pada simulasi koneksi 3G.
  2. Gunakan Shift+Tab atau kembali ke mode Jelajahi untuk mengubah setelan audit.
  3. Setelah siap menjalankan audit, kembali ke tombol Jalankan Audit dan tekan Enter.
  4. Fokus akan berpindah ke jendela modal dengan tombol Cancel yang memungkinkan Anda keluar dari audit. Anda mungkin mendengar serangkaian earcon saat audit berjalan dan memuat ulang halaman beberapa kali.

Masalah umum

  • Bagian yang berbeda dari formulir konfigurasi saat ini tidak di-markup dengan elemen fieldset. Mungkin lebih mudah untuk menjelajahinya dalam mode Jelajahi untuk mengetahui kontrol mana yang terkait dengan setiap bagian.
  • Tidak ada pengumuman earcon atau live region saat audit selesai berjalan. Biasanya perlu waktu sekitar 30 detik, setelah itu Anda akan dapat membuka hasilnya. Menggunakan mode Jelajahi mungkin cara termudah untuk mencapai hasil.

Menjelajahi laporan audit

Laporan audit diatur ke dalam beberapa bagian yang sesuai dengan masing-masing kategori audit. Laporan akan terbuka dengan daftar skor untuk setiap kategori. Skor ini juga merupakan link yang dapat digunakan untuk melewati bagian yang relevan. Di setiap bagian terdapat elemen details yang dapat diperluas, yang berisi informasi terkait audit yang lulus atau gagal. Secara default, hanya audit yang gagal yang akan 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, lalu cari tombol Perform An Audit.