Alat pemaju Inspect Element di Firefox membolehkan anda menentukan kod HTML untuk apa sahaja yang anda lihat di laman web anda. Lembaran gaya HTML dan CSS yang disertakan dapat diedit sepenuhnya setelah alat ini dibuka. Eksperimen dengan perubahan yang anda suka, kemudian muat semula halaman untuk kembali ke penampilan laman web yang dimaksudkan.
Langkah-langkah
Bahagian 1 dari 2: Memeriksa Elemen
Langkah 1. Klik kanan mana-mana elemen laman web
Anda boleh mengklik kanan pada gambar, teks, latar belakang, atau elemen lain. Sekiranya anda tidak mempunyai tetikus dua butang, klik kiri sambil menahan Control.
Langkah 2. Klik Inspect Element dari menu lungsur turun
Bar alat akan muncul di bahagian bawah tetingkap anda. Panel juga akan muncul di bawah bar alat, memaparkan kod HTML halaman.
Langkah 3. Kenal pasti bar alat dan panel
Apabila anda mengklik Inspect Element, beberapa panel akan terbuka di bahagian bawah tetingkap anda. Berikut adalah perincian penggunaan dan nama mereka:
- Baris teratas adalah Toolbar Toolbar. Ini mempunyai beberapa alat pembangun, tetapi kami berminat dengan Inspektor di sebelah kiri. Pastikan ini dipilih (diserlahkan dengan warna biru) untuk keseluruhan panduan ini.
- Di bawah bar alat, terdapat satu baris elemen HTML Breadcrumbs, menunjukkan jalan lengkap yang berkaitan dengan elemen yang dipilih.
- Panel di bawah baris ini menunjukkan hierarki HTML atau "Markup View" halaman. HTML untuk elemen yang anda pilih diserlahkan dan berpusat di panel ini.
- Panel di sebelah kanan memaparkan lembaran gaya CSS untuk halaman ini.
Langkah 4. Pilih elemen lain
Setelah bar alat terbuka, memilih elemen lain adalah mudah. Berikut adalah tiga cara untuk melakukannya:
- Arahkan kursor ke baris HTML untuk menyerlahkan elemen yang sesuai (memerlukan Firefox 34+). Klik HTML untuk memilih elemen tersebut.
- Klik alat Pilih Elemen di paling kiri bar alat: ikonnya adalah kursor di atas petak. Gerakkan kursor ke halaman untuk menyerlahkan elemen, kemudian klik untuk memilih elemen.
Langkah 5. Navigasi melalui kod
Klik di mana sahaja di panel HTML. Gunakan anak panah kiri dan kanan pada papan kekunci anda untuk beralih kod (memerlukan Firefox 39+). Ini berguna untuk elemen yang terlalu kecil untuk dipilih dengan tangan.
- HTML kelabu berkaitan dengan elemen yang tidak dipaparkan di halaman. Ini termasuk komen, nod tertentu seperti, dan elemen yang telah disembunyikan dengan sifat paparan CSS.
- Klik anak panah di sebelah kiri bekas untuk mengembangkan atau menyembunyikan kandungannya. Untuk memperluas semua kandungan, tahan alt="Gambar" atau pilihan sambil mengklik.
Langkah 6. Cari elemen
Cari bar carian (ikon kaca pembesar) di sebelah kanan barisan Breadcrumbs. Klik ini untuk mengembangkannya, kemudian taipkan kod HTML yang anda cari. Semasa anda menaip, pop timbul akan muncul menyenaraikan elemen yang sepadan. Klik pada satu untuk memilih elemen itu dan tatal panel HTML ke kodnya.
Bahagian 2 dari 2: Menyunting HTML
Langkah 1. Muat semula halaman untuk memulakannya pada bila-bila masa
Sekiranya anda baru menggunakan alat pembangun web, fahami bahawa alat ini tidak membuat perubahan tetap. Hasil edit anda hanya akan dapat dilihat di skrin anda, dan hanya sehingga anda menutup halaman atau menyegarkannya. Jangan ragu untuk bereksperimen walaupun anda tidak pasti apa yang akan berlaku.
Langkah 2. Klik dua kali HTML untuk mengedit teks
Klik dua kali pada baris HTML. Ketik teks baru dan tekan enter untuk menyimpan perubahan anda.
Langkah 3. Klik dan tahan serbuk roti untuk lebih banyak pilihan
Ingat, bar alat Breadcrumb dipasangkan di antara pokok HTML penuh dan bar alat atas. Klik dan tahan salah satu elemen dalam baris ini untuk membuka menu yang luas. Berikut adalah panduan yang tidak lengkap untuk pilihan ini:
- "Edit sebagai HTML" menjadikan simpul dan semua isinya dapat diedit di hierarki HTML, dan bukannya perlu mengedit setiap baris secara individu.
- "Salin HTML Dalaman" menyalin semua isi node, sementara "Salin HTML Luar" juga menyalin node (seperti atau
- "Tampal →" membawa kepada beberapa pilihan tempat penampalan, seperti sebelum nod ini atau selepas anak pertama nod.
- : hover,: aktif, dan: fokus mengubah penampilan elemen semasa pengguna berinteraksi dengannya. Kesan tepat ditentukan oleh helaian gaya CSS (boleh diedit dari panel sebelah kanan).
Langkah 4. Seret dan lepas
Untuk menyusun semula elemen dalam kod, klik dan tahan HTML sehingga garis putus-putus muncul. Gerakkan ke atas atau ke bawah pokok dan lepaskan ketika garis putus-putus berada di tempat yang diinginkan.
Ini memerlukan Firefox 39 atau lebih baru
Langkah 5. Tutup bar alat pembangun
Untuk menutup semua tetingkap mewah ini, tekan saja X di sudut paling kanan bar alat, di atas panel CSS.
Petua
- Anda juga boleh membuka bar alat dengan pilihan menu teratas berikut:
- Windows: Firefox → Pembangun Web → Toggle Tools
- Mac atau Linux: Alat → Pembangun Web → Toggle Tools
- Firefox 40 memperkenalkan pilihan untuk menyembunyikan panel CSS untuk memberi anda lebih banyak ruang semasa mengedit HTML. Cari ikon anak panah di paling kanan baris Breadcrumbs, di sebelah kanan bar carian. Klik ikon ini untuk menyembunyikan panel CSS, dan klik sekali lagi untuk mengembangkannya lagi.
- Panel CSS juga dapat diedit, tetapi di luar skop panduan ini. Artikel ini mengajar asas-asas CSS.
