Unduh PDF Unduh PDF

"Inspect Element" merupakan alat pengembang di peramban Firefox yang bisa Anda gunakan untuk melacak kode HTML pada halaman web mana pun. HTML dan stylesheet CSS suatu halaman web dapat disunting dengan "Inspect Element". Anda bisa mencoba menyunting suatu halaman sesuka Anda dan mengembalikannya seperti semula hanya dengan memuat ulang halaman web yang disunting.

Bagian 1
Bagian 1 dari 2:

Memeriksa Elemen

Unduh PDF
  1. Ada kemungkinan Anda tidak dapat mengakses fitur yang akan dibahas dalam artikel ini jika Anda menggunakan Firefox versi lama. Pembaruan akan terpasang secara otomatis ketika Anda mengecek versi Firefox yang Anda gunakan .
    • Firefox 9 dan versi sebelumnya tidak memiliki alat "Inspect Element" sama sekali.
  2. Anda dapat mengklik-kanan gambar, teks, latar belakang, atau elemen mana pun. Jika tetikus Anda hanya memiliki satu tombol, kombinasi klik-kiri dan tombol Control akan menghasilkan klik-kanan.
  3. Sebuah toolbar akan muncul di bagian bawah jendela. Sebuah panel di bawah toolbar juga akan muncul dan menampilkan kode HTML pada halaman aktif.
  4. Ketika Anda menggunakan "Inspect Element", beberapa panel akan terbuka di bawah jendela peramban. Di bawah ini akan dijelaskan nama dan fungsi toolbar serta panel yang terdapat di "Inspect Element":
    • Di baris atas terdapat Toolbox Toolbar . Terdapat beberapa alat yang bisa ditemukan di sini, tetapi kita akan fokus dengan tombol Inspector di sebelah kiri. Pastikan tombol ini aktif (ditandai dengan warna tombol yang berubah menjadi biru ketika aktif) sepanjang panduan ini.
    • Di bawahnya, terdapat sebaris petunjuk navigasi ( Breadcrumbs ) elemen HTML yang menunjukkan lokasi dari elemen yang sedang dipilih.
    • Panel di bawah petunjuk navigasi menunjukkan pohon HTML atau "Markup View" dari halaman web. HTML suatu elemen yang dipilih akan ditandai dan berada di tengah panel ini.
    • Panel yang berada di sebelah kanan menampilkan stylesheet CSS halaman web aktif.
  5. Saat toolbar terbuka, Anda dapat dengan mudah memilih elemen lainnya. Ada tiga cara untuk melakukannya:
    • Arahkan kursor pada sebaris HTML untuk menandai elemen yang dipilih (fitur ini membutuhkan Firefox 34+). [1] Click the HTML to select that element.
    • Klik alat "Select Element" di pojok kiri toolbar : alat ini mempunyai ikon berbentuk kursor di atas sebuah kotak. Pindahkan kursor di halaman web untuk menandai elemen dan klik untuk memilihnya.
  6. Klik mana saja di panel HTML. Gunakan tombol arah kanan dan kiri di papan ketik untuk berpindah dari kode ke kode (fitur ini membutuhkan Firefox 39+). [2] Cara ini berguna untuk memilih elemen yang terlalu kecil untuk dipilih dengan kursor.
    • HTML yang abu-abu menandakan elemen yang tidak ditampilkan di halaman. Elemen yang termasuk dalam hal ini adalah komentar, node seperti <head>, dan elemen lainnya yang disembunyikan oleh CSS display property . [3]
    • Klik panah di sebelah kiri kotak untuk menampilkan atau menyembunyikan konten. Untuk menampilkan seluruh konten, tahan Alt atau option sembari mengeklik panah. [4]
  7. Cari kolom pencarian (ikon berbentuk lup) di pojok kanan baris breadcrumbs . Klik untuk memperluas kolom pencarian dan ketik kode HTML yang ingin dicari. Ketika Anda mengetik, sebuah pop-up akan ditampilkan dan memunculkan hasil pencarian yang cocok. Klik salah satu elemen dari hasil pencarian dan gulirkan panel HTML ke kode yang dicari.
    Iklan
Bagian 2
Bagian 2 dari 2:

Menyunting HTML

Unduh PDF
  1. Jika Anda awam dalam alat-alat pengembangan situs web, ketahuilah bahwa Anda tidak melakukan perubahan permanen terhadap halaman yang Anda sunting. Suntingan Anda hanya ditampilkan di layar Anda hingga Anda memuat ulang atau menutup halaman tersebut. Jangan ragu untuk melakukan eksperimen walau pun Anda tidak tahu apa yang akan terjadi.
  2. Klik ganda sebaris HTML. Ketik teks yang baru dan tekan enter untuk menyimpan perubahan.
  3. Ingatlah bahwa toolbar breadcrumb berada di antara pohon HTML dan toolbar di atasnya. Klik dan tahan alat di baris ini untuk membuka menu yang lebih banyak. Di bawah ini adalah petunjuk opsi yang tersedia (tidak lengkap): [5]
    • "Edit as HTML" membuat Anda dapat menyunting semua konten HTML dari pohon HTML langsung alih-alih menyunting tiap baris.
    • "Copy Inner HTML" menyalin seluruh konten di dalam node , sementara "Copy Outer HTML" menyalin konten dan node (seperti <div> atau <body>
    • "Paste →" memunculkan beberapa pilihan tempat menempel salinan, seperti sebelum node atau setelah anak pertama node .
    • :hover, :active, and :focus mengubah penampilan elemen ketika pengguna berinteraksi. Efek yang berubah ditentukan dari stylesheet CSS (Dapat disunting dari panel di sebelah kanan).
  4. Untuk mengatur ulang elemen di dalam kode, klik dan tahan HTML hingga muncul garis putus-putus. Pindahkan garis tersebut ke atas dan bawah pohon dan lepaskan tombol tetikus apabila garis tersebut sudah berada di tempat yang diinginkan.
    • Fitur ini membutuhkan Firefox 39 dan versi terbaru. [6]
  5. Untuk menutup seluruh jendela Inspect Element, klik tombol X di pojok kanan atas toolbar yang terletak di atas panel CSS.
    Iklan

Tips

  • Anda juga bisa membuka toolbar dari pilihan menu di bagian atas jendela: [7]

    • Windows: Firefox Web Developer Toggle Tools
    • Mac or Linux: Tools Web Developer Toggle Tools
  • Firefox 40 memiliki opsi untuk menyembunyikan panel CSS sehingga Anda memiliki ruang lebih untuk menyunting HTML. [8] Cari ikon bergambar panah di pojok kanan baris breadcrumbs dan berada di sebelah kanan kolom pencarian. Klik ikon ini untuk menyembunyikan panel CSS dan klik lagi untuk memunculkannya.
  • Anda juga dapat menyunting panel CSS, tetapi hal tersebut tidak tercantum di dalam artikel ini. Anda bisa mencari instruksi untuk menyunting kode CSS di internet.
Iklan

Tentang wikiHow ini

Halaman ini telah diakses sebanyak 30.450 kali.

Apakah artikel ini membantu Anda?

Iklan