Alat pengembang Inspect Element di Firefox memungkinkan Anda menentukan kode HTML untuk apa pun yang Anda lihat di halaman web Anda. HTML dan stylesheet CSS yang menyertainya dapat diedit sepenuhnya setelah alat ini terbuka. Bereksperimenlah dengan perubahan apa pun yang Anda suka, lalu segarkan halaman untuk kembali ke tampilan halaman web yang diinginkan.
Langkah
Bagian 1 dari 2: Memeriksa Elemen
Langkah 1. Klik kanan elemen halaman web mana pun
Anda dapat mengklik kanan pada gambar, teks, latar belakang, atau elemen lainnya. Jika Anda tidak memiliki mouse dua tombol, klik kiri sambil menahan Control.
Langkah 2. Klik Inspect Element dari menu drop-down
Toolbar akan muncul di bagian bawah jendela Anda. Sebuah panel juga akan muncul di bawah toolbar, menampilkan kode HTML halaman.
Langkah 3. Identifikasi toolbar dan panel
Saat Anda mengklik Inspect Element, beberapa panel akan terbuka di bagian bawah jendela Anda. Berikut rincian kegunaan dan namanya:
- Baris atas adalah Toolbar Toolbox. Ini memiliki beberapa alat pengembang, tetapi kami tertarik dengan Inspektur di sebelah kiri. Tetap pilih ini (disorot dengan warna biru) untuk keseluruhan panduan ini.
- Di bawah bilah alat, ada satu baris Breadcrumbs dari elemen HTML, menunjukkan jalur lengkap yang berkaitan dengan elemen yang dipilih.
- Panel di bawah baris ini menunjukkan pohon HTML atau "Tampilan Markup" halaman. HTML untuk elemen yang Anda pilih disorot dan dipusatkan di panel ini.
- Panel di sebelah kanan menampilkan stylesheet CSS untuk halaman ini.
Langkah 4. Pilih elemen lain
Setelah bilah alat terbuka, memilih elemen lain menjadi mudah. Berikut adalah tiga cara untuk melakukannya:
- Arahkan kursor ke baris HTML untuk menyorot elemen yang sesuai (membutuhkan Firefox 34+). Klik HTML untuk memilih elemen tersebut.
- Klik alat Pilih Elemen di paling kiri bilah alat: ikonnya adalah kursor di atas kotak. Gerakkan kursor Anda di atas halaman untuk menyorot elemen, lalu klik untuk memilih elemen.
Langkah 5. Arahkan melalui kode
Klik di mana saja di panel HTML. Gunakan panah kiri dan kanan pada keyboard Anda untuk menelusuri kode (membutuhkan Firefox 39+). Ini berguna untuk elemen yang terlalu kecil untuk dipilih dengan tangan.
- HTML abu-abu berhubungan dengan elemen yang tidak ditampilkan pada halaman. Ini termasuk komentar, node tertentu seperti, dan elemen yang telah disembunyikan dengan properti tampilan CSS.
- Klik panah di sebelah kiri wadah untuk membuka atau menyembunyikan isinya. Untuk memperluas semua konten, tahan alt=""Image" atau opsi saat mengeklik.</li" />
Langkah 6. Cari elemen
Cari bilah pencarian (ikon kaca pembesar) di ujung kanan baris Breadcrumbs. Klik ini untuk memperluasnya, lalu ketik kode HTML yang Anda cari. Saat Anda mengetik, sebuah popup akan muncul yang mencantumkan elemen yang cocok. Klik salah satu untuk memilih elemen itu dan gulir panel HTML ke kodenya.
Bagian 2 dari 2: Mengedit HTML
Langkah 1. Segarkan halaman untuk memulai dari awal kapan saja
Jika Anda baru mengenal alat pengembang web, pahami bahwa alat tersebut tidak membuat perubahan permanen. Hasil edit Anda hanya akan terlihat di layar Anda, dan hanya sampai Anda menutup halaman atau menyegarkannya. Jangan ragu untuk bereksperimen bahkan jika Anda tidak yakin apa yang akan terjadi.
Langkah 2. Klik dua kali HTML untuk mengedit teks
Klik dua kali satu baris HTML. Ketik teks baru dan tekan enter untuk menyimpan perubahan Anda.
Langkah 3. Klik dan tahan remah roti untuk opsi lainnya
Ingat, bilah alat Breadcrumb diapit di antara pohon HTML lengkap dan bilah alat atas. Klik dan tahan salah satu elemen di baris ini untuk membuka menu ekstensif. Berikut panduan lengkap untuk opsi ini:
- "Edit sebagai HTML" membuat simpul dan semua kontennya dapat diedit di pohon HTML, daripada harus mengedit setiap baris satu per satu.
- "Salin HTML Dalam" menyalin semua konten simpul, sementara "Salin HTML Luar" juga menyalin simpul (seperti atau
- "Tempel →" mengarah ke beberapa opsi tempat untuk menempel, seperti sebelum node ini atau setelah anak pertama dari node.
- :hover,:active, dan:focus mengubah tampilan elemen saat pengguna berinteraksi dengannya. Efek yang tepat ditentukan oleh stylesheet CSS (dapat diedit dari panel sebelah kanan).
Langkah 4. Seret dan lepas
Untuk mengatur ulang elemen dalam kode, klik dan tahan HTML hingga garis putus-putus muncul. Pindahkan ke atas atau ke bawah pohon dan lepaskan ketika garis putus-putus berada di tempat yang diinginkan.
Ini membutuhkan Firefox 39 atau yang lebih baru
Langkah 5. Tutup bilah alat pengembang
Untuk menutup semua jendela mewah ini, cukup tekan X di sudut paling kanan bilah alat, di atas panel CSS.
Tips
- Anda juga dapat membuka bilah alat dengan opsi menu teratas ini:
- Windows: Firefox → Pengembang Web → Toggle Tools
- Mac atau Linux: Alat → Pengembang Web → Toggle Tools
- Firefox 40 memperkenalkan opsi untuk menyembunyikan panel CSS untuk memberi Anda lebih banyak ruang saat mengedit HTML. Cari ikon panah di ujung kanan baris Breadcrumbs, di sebelah kanan bilah pencarian. Klik ikon ini untuk menyembunyikan panel CSS, dan klik lagi untuk memperluasnya lagi.
- Panel CSS juga dapat diedit, tetapi itu di luar cakupan panduan ini. Artikel ini mengajarkan dasar-dasar CSS.
