Cara Menggunakan Inspect Element di Mozilla Firefox

PDF download Unduh PDF
PDF download 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

PDF download Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2e\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-1-Version-4.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-1-Version-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-1-Version-4.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-1-Version-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/28\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/28\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d1\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d1\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Sebuah toolbar akan muncul di bagian bawah jendela. Sebuah panel di bawah toolbar juga akan muncul dan menampilkan kode HTML pada halaman aktif.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/95\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/95\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a4\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-6-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/62\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/62\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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

PDF download Unduh PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ee\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ee\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/ef\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/ef\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Klik ganda sebaris HTML. Ketik teks yang baru dan tekan enter untuk menyimpan perubahan.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/aa\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/aa\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/44\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/44\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/79\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg\/v4-460px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/79\/Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg\/v4-728px-Use-the-Inspect-Element-in-Mozilla-Firefox-Step-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    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

wikiHow Terkait

Cara
Mempercepat Kinerja Firefox
Cara
Memblokir Pop–up di Firefox
Cara
Memblokir Situs di Firefox
Cara
Menurunkan Versi Firefox
Cara
Mengunduh Mozilla Firefox
Cara
Menghapus Firefox
Cara
Mengatur Bookmark di Firefox
Cara
Menonaktifkan Pemblokir Pop‐Up pada Firefox
Cara
Menjalankan Firefox dalam Safe Mode
Cara
Mengaktifkan Cookie di Firefox
Cara
Mengaktifkan JavaScript di Mozilla Firefox
Cara
Mengubah Halaman Awal di Mozilla Firefox
Cara
Memarkahi Halaman di Mozilla Firefox
Cara
Mencari Tahu Versi Firefox yang Digunakan
Iklan

Referensi

  1. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  2. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element
  3. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  4. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  5. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  6. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML
  7. ↑ https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox
  8. ↑ https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour

Tentang wikiHow ini

Bahasa lain
Halaman ini telah diakses sebanyak 31.097 kali.

Apakah artikel ini membantu Anda?

Iklan