"Inspect Element" adalah alat pembangun dalam penyemak imbas Firefox yang boleh anda gunakan untuk mengesan kod HTML di mana-mana laman web. Lembaran gaya HTML dan CSS halaman web dapat diedit dengan "Inspect Element". Anda boleh cuba mengedit halaman yang anda suka dan mendapatkannya kembali seperti sebelumnya dengan memuatkan semula halaman web yang diedit.
Langkah
Bahagian 1 dari 2: Memeriksa Elemen
Langkah 1. Kemas kini Firefox (pilihan)
Anda mungkin tidak dapat mengakses ciri yang dibincangkan dalam artikel ini jika anda menggunakan Firefox versi lama. Kemas kini akan dipasang secara automatik semasa anda memeriksa versi Firefox yang anda gunakan.
Firefox 9 dan versi sebelumnya tidak mempunyai alat "Inspect Element" sama sekali
Langkah 2. Klik kanan mana-mana elemen laman web
Anda boleh mengklik kanan gambar, teks, latar belakang, atau elemen apa pun. Sekiranya tetikus anda hanya mempunyai satu butang, kombinasi klik kiri dan kekunci Control akan menghasilkan klik kanan.
Langkah 3. Klik "Periksa Elemen" dari menu lungsur
Bar alat akan muncul di bahagian bawah tetingkap. Panel di bawah bar alat juga akan muncul dan memaparkan kod HTML di halaman aktif.
Langkah 4. Kenali bar alat dan panel yang ada
Apabila anda menggunakan "Inspect Element", beberapa panel akan terbuka di bawah tetingkap penyemak imbas. Berikut ini menerangkan nama dan fungsi bar alat dan panel dalam "Inspect Element":
- Di barisan atas adalah Toolbar Toolbar. Terdapat beberapa alat untuk dijumpai di sini, tetapi kami akan menumpukan pada butang Inspektor di sebelah kiri. Pastikan butang ini aktif (ditunjukkan oleh warna butang yang berubah menjadi biru ketika aktif) di sepanjang panduan ini.
- Di bawah itu, terdapat sebaris serbuk roti elemen HTML yang menunjukkan lokasi elemen yang sedang dipilih.
- Panel di bawah arahan navigasi menunjukkan pokok HTML atau "Markup View" halaman web. HTML elemen yang dipilih akan ditandakan dan berpusat di panel ini.
- Panel di sebelah kanan memaparkan lembaran gaya CSS halaman web semasa.
Langkah 5. Pilih elemen lain
Apabila bar alat terbuka, anda boleh memilih elemen lain dengan mudah. Terdapat tiga cara untuk melakukan ini:
- Arahkan kursor ke baris HTML untuk menandakan elemen yang dipilih (ciri ini memerlukan Firefox 34+). Klik HTML untuk memilih elemen itu.
- Klik alat "Pilih Elemen" di sudut kiri bar alat: ia mempunyai ikon berbentuk kursor di atas kotak. Gerakkan kursor di laman web untuk menandakan elemen dan klik untuk memilihnya.
Langkah 6. Jejaki kod HTML
Klik di mana sahaja di panel HTML. Gunakan kekunci arah kiri dan kanan pada papan kekunci untuk beralih dari kod ke kod (ciri ini memerlukan Firefox 39+). Kaedah ini berguna untuk memilih elemen yang terlalu kecil untuk dipilih dengan kursor.
- HTML yang berwarna kelabu menunjukkan elemen yang tidak dipaparkan di halaman. Elemen yang termasuk dalam ini adalah komen, seperti nod, dan elemen lain yang disembunyikan oleh harta paparan CSS.
- Klik anak panah di sebelah kiri kotak untuk menunjukkan atau menyembunyikan kandungannya. Untuk memaparkan keseluruhan kandungan, tahan alt="Image" atau pilihan sambil mengklik anak panah.
Langkah 7. Cari elemen
Cari bidang carian (ikon berbentuk gelung) di sudut paling kanan baris serbuk roti. Klik untuk meluaskan bidang carian dan taipkan kod HTML yang ingin anda cari. Semasa anda mengetik, pop-up akan dipaparkan yang menunjukkan hasil carian yang sepadan. Klik elemen dari hasil carian dan tatal panel HTML ke kod yang anda cari.
Bahagian 2 dari 2: Menyunting HTML
Langkah 1. Muat semula halaman untuk memulakan semula
Sekiranya anda baru menggunakan alat pengembangan laman web, ketahuilah bahawa anda tidak membuat perubahan tetap pada halaman yang anda edit. Hasil edit anda hanya muncul di skrin anda sehingga anda memuat semula atau menutup halaman. Jangan ragu untuk bereksperimen walaupun anda tidak tahu apa yang akan berlaku.
Langkah 2. Klik dua kali HTML untuk mengedit
Klik dua kali sebaris HTML. Ketik teks baru dan tekan enter untuk menyimpan perubahan.
Langkah 3. Klik dan tahan alat di serbuk roti untuk memunculkan lebih banyak pilihan
Perhatikan bahawa bar alat serbuk roti terletak di antara pokok HTML dan bar alat di atasnya. Klik dan tahan alat di baris ini untuk membuka lebih banyak menu. Berikut adalah petunjuk mengenai pilihan yang ada (tidak lengkap):
- "Edit sebagai HTML" membolehkan anda mengedit semua kandungan HTML dari pokok HTML secara langsung dan bukannya mengedit setiap baris.
- "Salin HTML Dalaman" menyalin keseluruhan kandungan di dalam node, sementara "Salin HTML Luar" menyalin kandungan dan nod (seperti atau
- "Tampal →" memunculkan beberapa pilihan tempat menampal salinan, seperti sebelum simpul atau selepas anak pertama simpul.
- : hover,: aktif, dan: fokus mengubah penampilan elemen semasa pengguna berinteraksi. Kesan yang berubah ditentukan dari lembaran gaya CSS (Boleh diedit dari panel di sebelah kanan).
Langkah 4. Seret dan lepas
Untuk menyusun semula elemen dalam kod, klik dan tahan HTML sehingga garis putus-putus muncul. Gerakkan garis ke atas dan ke bawah pokok dan lepaskan butang tetikus ketika garis berada di tempat yang anda mahukan.
Ciri ini memerlukan Firefox 39 dan lebih baru
Langkah 5. Tutup bar alat pembangun
Untuk menutup keseluruhan tetingkap Inspect Element, klik butang X di sudut kanan atas bar alat yang terletak di atas panel CSS.
Petua
- Anda juga dapat membuka bar alat dari pilihan menu di bahagian atas tetingkap:
- Windows: Firefox → Pembangun Web → Toggle Tools
- Mac atau Linux: Alat → Pembangun Web → Toggle Tools
- Firefox 40 mempunyai pilihan untuk menyembunyikan panel CSS sehingga anda mempunyai lebih banyak ruang untuk mengedit HTML. Cari ikon anak panah di sudut paling kanan baris serbuk roti dan di sebelah kanan medan carian. Klik ikon ini untuk menyembunyikan panel CSS dan klik sekali lagi untuk memunculkannya.
- Anda juga boleh mengedit panel CSS, tetapi tidak disenaraikan dalam artikel ini. Anda boleh mendapatkan arahan untuk mengedit kod CSS di internet.
