Lihat HTML dan CSS dari Setiap Halaman Web
Situs web dibangun dengan baris kode , tetapi hasilnya adalah halaman tertentu dengan gambar, video, font dan banyak lagi. Untuk mengubah salah satu dari elemen-elemen tersebut atau melihat apa itu terdiri dari, Anda harus menemukan baris kode tertentu yang mengendalikannya. Anda dapat melakukannya dengan alat pemeriksaan elemen.
Sebagian besar browser web tidak membuat Anda mengunduh alat inspeksi atau memasang add-on. Sebaliknya, mereka membiarkan Anda mengklik kanan elemen halaman dan memilih Inspect atau Inspect Element . Namun, prosesnya mungkin sedikit berbeda di browser Anda.
Periksa Elemen di Chrome
Versi terbaru Google Chrome memungkinkan Anda memeriksa halaman dalam beberapa cara, yang semuanya menggunakan DevTools Chrome yang ada di dalamnya:
- Klik kanan sesuatu di halaman (atau area kosong) dan pilih Inspect
- Masukkan pintasan keyboard Ctrl + Shift + I
- Gunakan menu Chrome untuk mengakses Alat Lainnya> Opsi alat pengembang
DevTools Chrome memungkinkan Anda melakukan hal-hal seperti menyalin atau mengedit baris HTML dengan mudah atau menyembunyikan atau menghapus elemen sama sekali (hingga laman dimuat ulang).
Setelah DevTools terbuka di sisi halaman, Anda dapat mengubah posisi itu, memunculkannya keluar dari halaman, mencari semua file halaman, memilih elemen dari halaman untuk pemeriksaan khusus, menyalin file dan URL, dan bahkan menyesuaikan banyak pengaturan.
Periksa Elemen di Firefox
Seperti Chrome, Firefox memiliki beberapa cara berbeda untuk membuka alat yang disebut Inspektur:
- Klik kanan area kosong di halaman atau pilih elemen, dan pilih Elemen Inspeksi
- Masukkan Ctrl + Shift + T atau Ctrl + Shift + I dengan keyboard
- Dari menu Firefox, klik Pengembang > Pemeriksa
- Dari menu Alat , klik Pengembang Web> Pemeriksa
Saat Anda memindahkan mouse ke berbagai elemen di Firefox, alat Inspektur secara otomatis menemukan informasi kode sumber elemen. Klik elemen dan "pencarian on-the-fly" akan berhenti dan Anda dapat memeriksa elemen dari jendela Inspektur.
Klik kanan sebuah elemen untuk menemukan semua kontrol yang didukung. Anda dapat melakukan hal-hal seperti mengedit halaman sebagai HTML, menyalin atau menempelkan kode HTML dalam atau luar, menampilkan properti DOM, tangkapan layar atau menghapus node, dengan mudah menerapkan atribut baru, melihat semua halaman CSS, dan banyak lagi.
Periksa Elemen di Opera
Opera juga dapat memeriksa elemen, dengan alat DOM Inspector yang identik dengan Chrome. Berikut cara mendapatkannya:
- Gunakan pintasan keyboard Ctrl + Shift + I
- Arahkan ke Menu> Alat Lainnya> Tampilkan menu Pengembang , lalu buka menu melalui Menu> Pengembang> Alat Pengembang
- Dari menu klik kanan pada elemen apa pun di halaman, pilih Elemen periksa
Periksa Elemen di Internet Explorer
Alat elemen inspect serupa, yang disebut Alat Pengembang, tersedia di Internet Explorer:
- Tekan F12 pada keyboard
- Gunakan Tools> Opsi Menu Pengembang F12 (tekan Alt + X jika Anda tidak melihat menu Tools )
- Klik kanan pada halaman dan klik Inspect Element
IE memiliki alat Pilih elemen dalam menu baru ini yang memungkinkan Anda mengklik elemen halaman apa pun untuk melihat detail HTML dan CSS-nya. Anda juga dapat dengan mudah menonaktifkan / mengaktifkan penyorotan elemen saat Anda menjelajah melalui tab DOM Explorer .
Seperti alat inspektur elemen lain di browser di atas, Internet Explorer memungkinkan Anda memotong, menyalin, dan menempel elemen serta mengedit HTML, menambahkan atribut, menyalin elemen dengan gaya yang dilampirkan, dan banyak lagi.