"Inspect Element" alat je za razvojne programere u pregledniku Firefox koji možete koristiti za praćenje HTML koda na bilo kojoj web stranici. HTML i CSS stilske tablice web stranice mogu se uređivati pomoću "Inspect Element". Možete pokušati urediti stranicu kako god želite i vratiti je na stanje kakva je bila jednostavnim ponovnim učitavanjem uređene web stranice.
Korak
1. dio od 2: Provjera elemenata
Korak 1. Ažurirajte Firefox (izborno)
Moguće je da nećete moći pristupiti značajkama o kojima se govori u ovom članku ako koristite stariju verziju Firefoxa. Ažuriranje će se automatski instalirati kada provjerite koju verziju Firefoxa koristite.
Firefox 9 i starije verzije uopće nemaju alat "Inspect Element"
Korak 2. Desnom tipkom miša kliknite bilo koji element web stranice
Možete desnom tipkom miša kliknuti bilo koju sliku, tekst, pozadinu ili element. Ako vaš miš ima samo jedan gumb, kombinacija desnog klika i tipke Control rezultirat će desnim klikom.
Korak 3. Na padajućem izborniku kliknite "Pregledaj element"
Alatna traka pojavit će se pri dnu prozora. Ploča ispod alatne trake također će se pojaviti i prikazati HTML kôd na aktivnoj stranici.
Korak 4. Upoznajte se s postojećim alatnim trakama i pločama
Kad koristite "Inspect Element", ispod prozora preglednika otvorit će se nekoliko ploča. U nastavku su opisani nazivi i funkcije alatnih traka i ploča u odjeljku "Pregled elementa":
- U gornjem retku nalazi se Alatna traka Toolbox. Ovdje se može pronaći nekoliko alata, ali mi ćemo se usredotočiti na gumb Inspector s lijeve strane. Provjerite je li ovaj gumb aktivan (označen bojom gumba koji postaje plav kada je aktivan) u ovom vodiču.
- Ispod toga nalazi se red mrvica HTML elemenata koji označavaju lokaciju trenutno odabranog elementa.
- U oknu ispod navigacijskih upita prikazano je HTML stablo ili "Markup View" web stranice. HTML odabranog elementa bit će označen i centriran u ovom oknu.
- Okno s desne strane prikazuje CSS tablicu stilova trenutne web stranice.
Korak 5. Odaberite drugi element
Kada je alatna traka otvorena, možete jednostavno odabrati druge elemente. Postoje tri načina za to:
- Zadržite pokazivač miša iznad retka HTML -a za označavanje odabranog elementa (za ovu je značajku potreban Firefox 34+). Pritisnite HTML za odabir tog elementa.
- Kliknite alat "Odaberi element" u lijevom kutu alatne trake: iznad okvira nalazi se ikona u obliku kursora. Pomaknite pokazivač na web stranici da biste označili element i kliknite za odabir.
Korak 6. Pratite HTML kôd
Kliknite bilo gdje u HTML oknu. Koristite lijevu i desnu tipku za usmjeravanje na tipkovnici za prelazak s koda na kôd (za ovu je značajku potreban Firefox 39+). Ova je metoda korisna za odabir elemenata koji su premali da bi se mogli odabrati kursorom.
- Sivi HTML označava elemente koji nisu prikazani na stranici. Elementi uključeni u ovo su komentari, poput čvorova, i drugi elementi skriveni svojstvom prikaza CSS -a.
- Pritisnite strelicu lijevo od okvira za prikaz ili skrivanje sadržaja. Za prikaz cijelog sadržaja držite pritisnutu tipku alt="Slika" ili opciju dok pritisnete strelicu.
Korak 7. Pronađite element
Potražite polje za pretraživanje (ikona u obliku petlje) u krajnjem desnom kutu reda krušnih mrvica. Kliknite za proširenje polja za pretraživanje i upišite HTML kôd koji želite pretraživati. Dok tipkate, prikazat će se skočni prozor s odgovarajućim rezultatima pretraživanja. Kliknite element iz rezultata pretraživanja i pomaknite HTML okno do koda koji tražite.
2. dio 2: Uređivanje HTML -a
Korak 1. Ponovo učitajte stranicu za početak ispočetka
Ako ste tek počeli s alatima za razvoj web stranica, imajte na umu da ne unosite trajne promjene na stranice koje uređujete. Vaše izmjene pojavljuju se samo na vašem zaslonu sve dok ponovno ne učitate ili zatvorite stranicu. Slobodno eksperimentirajte čak i ako ne znate što će se dogoditi.
Korak 2. Dvaput kliknite HTML za uređivanje
Dvaput kliknite na ugrađeni HTML. Upišite novi tekst i pritisnite enter za spremanje promjena.
Korak 3. Pritisnite i držite alat u mrvici za prikaz dodatnih mogućnosti
Imajte na umu da se alatna traka s krušnim mrvicama nalazi između HTML stabla i alatne trake iznad nje. Pritisnite i držite alat u ovom retku da biste otvorili više izbornika. Ispod je nagovještaj dostupnih opcija (koje nisu iscrpne):
- "Uređivanje kao HTML" omogućuje vam da izravno uredite sav HTML sadržaj s HTML stabla umjesto uređivanja svakog retka.
- "Kopiraj unutarnji HTML" kopira cijeli sadržaj unutar čvora, dok "Kopiraj vanjski HTML" kopira sadržaj i čvorove (poput ili
- "Zalijepi →" prikazuje nekoliko mogućnosti za mjesto lijepljenja kopije, na primjer prije čvora ili nakon prvog djeteta čvora.
- : hover,: active i: focus mijenjaju izgled elementa prilikom interakcije korisnika. Promijenjeni učinci definirani su iz CSS -ove tablice stilova (uređuje se s ploče s desne strane).
Korak 4. Povucite i ispustite
Za preuređivanje elemenata u kodu kliknite i držite HTML dok se ne pojavi isprekidana linija. Pomaknite crtu gore -dolje po stablu i otpustite tipku miša kad je linija na mjestu na kojem to želite.
Ova značajka zahtijeva Firefox 39 i novije verzije
Korak 5. Zatvorite alatnu traku za razvojne programere
Da biste zatvorili cijeli prozor Inspect Element, kliknite gumb X u gornjem desnom kutu alatne trake koja se nalazi iznad CSS ploče.
Savjeti
- Alatnu traku možete otvoriti i iz opcija izbornika pri vrhu prozora:
- Windows: Firefox → Web programer → Alati za uključivanje / isključivanje
- Mac ili Linux: Alati → Web programer → Alati za uključivanje / isključivanje
- Firefox 40 ima mogućnost skrivanja CSS ploče kako biste imali više prostora za uređivanje HTML -a. Potražite ikonu strelice u krajnjem desnom kutu redaka prezla i desno od polja za pretraživanje. Kliknite ovu ikonu da biste sakrili CSS ploču, a zatim ponovno da biste je prikazali.
- Također možete uređivati CSS ploče, ali one nisu navedene u ovom članku. Upute za uređivanje CSS koda možete pronaći na internetu.
