Mode pemeriksaan: Menganalisis properti elemen dengan cepat

Dale St. Marthe
Dale St. Marthe
LinkedIn

Gunakan Mode inspeksi untuk berfokus dan menganalisis elemen tertentu di halaman web Anda.

Ringkasan

Dengan mengaktifkan Mode periksa DevTools (pemilih pemilih), Anda dapat mengarahkan kursor ke elemen di halaman dan melihat informasi gaya dan aksesibilitas. Mengklik elemen saat Mode inspeksi aktif akan menandai elemen DOM yang sesuai di hierarki DOM panel Elemen, dan mencantumkan gaya yang relevan di tab Gaya.

Mengaktifkan mode Periksa

Untuk mengaktifkan Mode inspeksi:

  1. Buka DevTools
  2. Klik tombol Mode inspeksi di panel tindakan.

Tombol mode Periksa di panel tindakan.

Pemilih pemilih aktif saat ikon Mode inspeksi berwarna biru.

Anda juga dapat menggunakan pintasan di Chrome untuk membuka panel Elemen dalam mode Inspect. Tekan salah satu tombol berikut:

  • macOS: Cmd+Option+C
  • Windows, Linux, ChromeOS: Ctrl+Shift+C

Menggunakan mode Inspect untuk melihat informasi gaya dan aksesibilitas

Saat Mode inspeksi aktif, arahkan kursor ke elemen di halaman Anda. Tindakan ini akan menandai elemen dan menampilkan overlay tooltip. Panel Elemen akan otomatis meluaskan hierarki DOM untuk menandai elemen yang Anda arahkan kursor.

Elemen di halaman beranda Devtools ditandai dengan overlay tooltip yang terlihat.

Bergantung pada elemen, tooltip Mode inspeksi akan menampilkan properti gaya berikut:

  • Pemilih elemen.
  • Dimensi elemen, dalam piksel.
  • Warna latar belakang elemen.
  • Warna teks elemen.
  • Properti font elemen.
  • Padding elemen, dalam piksel.
  • Margin elemen, dalam piksel.

Selain itu, elemen yang menggunakan petak CSS atau flexbox CSS akan memiliki ikon yang berbeda di samping nama elemen.

Overlay tooltip dengan ikon fleksibel di sudut kiri atas

Bagian aksesibilitas tooltip akan menampilkan informasi berikut:

  • Nama dan peran elemen yang dilaporkan ke teknologi pendukung.
  • Apakah elemen dapat difokuskan dengan keyboard.

Mengarahkan kursor ke header teks secara khusus akan menampilkan rasio kontras, yang mengukur perbedaan kecerahan antara warna latar depan (warna teks) dan warna latar belakang.

Tooltip menampilkan rasio kontras 1,7 yang diukur untuk header.

Rasio kontras yang baik sangat penting untuk teks yang mudah dibaca. Cari tahu cara memperbaiki teks kontras rendah.

Mempertahankan dan menyembunyikan tooltip mode Inspeksi

Untuk mempertahankan tooltip Mode inspeksi sambil dapat memindahkan kursor mouse ke tempat lain, tekan dan tahan:

  • macOS: Ctrl+Option
  • Windows, Linux, ChromeOS: Ctrl+Alt

Untuk menyembunyikan tooltip inspeksi sementara saat Anda memindahkan kursor mouse, tekan dan tahan Ctrl.

Memeriksa elemen yang tidak dapat diakses

Elemen dengan properti CSS pointer-events: none; tidak dapat ditargetkan oleh Mode inspeksi pada awalnya.

Elemen inert yang tidak ditandai oleh pemilih pemilih.

Untuk memeriksa elemen yang tidak dapat diakses, tekan Shift sambil mengarahkan kursor ke elemen.

Elemen inert yang ditandai oleh pemilih pemilih.