Menjelajahi Chrome DevTools dengan teknologi pendukung

Rob Dodson

Panduan ini bertujuan untuk membantu pengguna yang terutama mengandalkan teknologi pendukung seperti pembaca layar untuk mengakses dan menggunakan Chrome DevTools. Chrome DevTools adalah serangkaian alat developer web yang terintegrasi ke 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 pendukung daripada yang lain. Panduan ini akan memandu Anda memahami panel yang paling mudah diakses dan menyoroti masalah tertentu yang mungkin Anda alami selama prosesnya.

Ringkasan

Sebelum memulai, sebaiknya miliki model mental tentang struktur UI DevTools. DevTools dibagi menjadi serangkaian panel yang disusun dalam 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, ada 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 melihat salah satu istilah adalah untuk menjaga konsistensi dengan dokumentasi DevTools resmi lainnya.

Pintasan keyboard

Referensi Pintasan Keyboard DevTools adalah lembar contekan yang berguna. Pastikan untuk menandainya dan membukanya kembali saat Anda menjelajahi berbagai panel.

Membuka DevTools

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

Menavigasi antar-panel

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 diumumkan, tetapi hanya setelah panel tersebut membaca konten yang difokuskan di dalam panel. Hal ini dapat membuatnya sangat mudah terlewat.

Membuka 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 kotak kombinasi pelengkapan otomatis penelusuran fuzzy.
  2. Ketik nama panel yang ingin Anda buka, 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. Dalam kasus panel Elemen, fokus 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 Elemen dan memfokuskan elemen di Pohon DOM.

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

Menyalin kode untuk elemen di Hierarki DOM

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

Masalah umum

  • Copy 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 Pohon 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 menyetujui perubahan dan mendengar seluruh isi elemen.

Masalah umum

  • Saat Anda mengetik di input teks, Anda tidak akan mendapatkan masukan. Jika Anda salah mengetik dan menggunakan tombol panah untuk menjelajahi input, Anda juga tidak akan mendapatkan masukan. Cara termudah untuk memeriksa pekerjaan Anda adalah dengan menerima perubahan, lalu mendengarkan seluruh elemen 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 Anda 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 di pohon aksesibilitas.

  • Dengan fokus pada node di Pohon 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 Titik Henti Sementara DOM dan Properti tidak dapat diakses menggunakan keyboard.

Panel gaya

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

Konsep utama yang perlu dipahami tentang panel Gaya adalah bahwa panel ini hanya menampilkan gaya untuk node yang saat ini dipilih di Pohon 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> di Pohon DOM terlebih dahulu. Anda mungkin merasa lebih cepat menggunakan alur kerja Periksa untuk memeriksa node yang berada di sekitar node footer (seperti link dalam footer), yang memfokuskan Pohon DOM, lalu menggunakan keyboard untuk membuka node yang tepat yang Anda minati.

Menjelajahi panel Gaya

Karena semua alat gaya terhubung dengan satu atau lain cara 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 menelusuri daftar gaya berdasarkan urutan spesifisitas. Pembaca layar mengumumkan setiap gaya, 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-pindah 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 dan dapat Anda gunakan untuk menambahkan properti CSS lainnya.
  • Anda dapat terus menekan Tab untuk berpindah antar-daftar gaya, atau menekan Escape untuk keluar dari mode ini dan kembali ke navigasi dengan tombol panah.

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

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

Mengalihkan status elemen

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

  1. Buka panel Gaya dan tekan Tab hingga tombol Alihkan Status Elemen mendapatkan fokus.
  2. Tekan Enter untuk meluaskan kumpulan status elemen. Status elemen ditampilkan sebagai grup kotak centang.
  3. Tekan Tab hingga status pertama, :active, difokuskan.
  4. Tekan Spasi untuk mengaktifkannya. Jika elemen yang saat ini dipilih di Pohon DOM memiliki gaya :active, gaya tersebut kini diterapkan.
  5. Terus tekan Tab untuk menjelajahi semua status yang tersedia.

Menambahkan kelas yang akan keluar

Di samping tombol Alihkan Status Elemen terdapat tombol Class Elemen. Pindahkan fokus ke tombol tersebut dengan menekan Tab, lalu Enter. Fokus berpindah ke kolom teks edit berlabel Tambahkan Class 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 sendiri nama kelas, lalu tekan Enter untuk menerapkannya.

Menambahkan aturan gaya baru

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

Tab yang Dikomputasi

Dengan fokus pada tab Computed, tekan Tab untuk memindahkan fokus ke dalam dan menjelajahi isinya. Dalam tab Computed, ada kontrol untuk menjelajahi properti CSS mana yang benar-benar diterapkan ke elemen dalam urutan spesifisitas.

Menjelajahi semua gaya komputasi

Tekan Tab hingga Anda mencapai kumpulan gaya terkomputasi. Hal ini disajikan sebagai ARIA tree. Memperluas kotak daftar akan menampilkan pemilih CSS mana yang menerapkan gaya terkomputasi. Pemilih ini disusun berdasarkan spesifisitas. 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 Anda 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 Styles, tekan Panah Kanan untuk berpindah ke tab Event Listeners.

Menjelajahi pemroses peristiwa

Pemroses peristiwa ditampilkan sebagai tree ARIA. Anda dapat menggunakan tombol panah untuk menavigasi opsi tersebut. Pembaca layar mengumumkan nama objek DOM yang terlampir pada pemroses peristiwa, 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 Aksesibilitas, ada kontrol untuk menjelajahi pohon aksesibilitas, atribut ARIA yang diterapkan ke elemen, dan properti aksesibilitas yang dikomputasi.

Hierarki Aksesibilitas

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

Masalah umum

  • Jenis hierarki ARIA yang digunakan oleh panel Aksesibilitas mungkin tidak diekspos 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 yang Dikomputasi 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 yang terkait dengan 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 koneksi 3G simulasi.
  2. Gunakan Shift+Tab atau kembali dalam mode Jelajah untuk mengubah setelan audit.
  3. Saat Anda siap menjalankan audit, kembali ke tombol Jalankan Audit dan tekan Enter.
  4. Fokus berpindah ke jendela modal dengan tombol Batal yang memungkinkan Anda keluar dari audit. Anda dapat mendengar serangkaian earcon saat audit berjalan dan memuat ulang halaman beberapa kali.

Masalah umum

  • Berbagai bagian formulir konfigurasi saat ini tidak ditandai dengan elemen fieldset. Anda mungkin lebih mudah menavigasi kontrol tersebut dalam mode Jelajah untuk mengetahui kontrol mana yang terkait dengan setiap bagian.
  • Tidak ada earcon atau pengumuman live region saat audit selesai dijalankan. Biasanya diperlukan waktu sekitar 30 detik, setelah itu Anda dapat membuka hasilnya. Menggunakan mode Jelajah mungkin merupakan cara termudah untuk melihat hasil.

Membuka laporan audit

Laporan audit disusun ke dalam beberapa bagian yang sesuai dengan setiap kategori audit. Laporan akan terbuka dengan daftar skor untuk setiap kategori. Skor ini juga merupakan link yang dapat digunakan untuk membuka 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.