"Inspect Element" je alat za programere u pregledniku Firefox koji možete koristiti za praćenje HTML koda na bilo kojoj web stranici. HTML i CSS tablice stilova 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 učitavanjem uređene web stranice.
Korak
1. dio 2: Provjera elemenata
Korak 1. Ažurirajte Firefox (opcionalno)
Moguće je da nećete moći pristupiti funkcijama 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 jedno dugme, kombinacija desnog klika i tipke Control rezultirat će desnim klikom.
Korak 3. Kliknite na "Inspect Element" iz padajućeg izbornika
Alatna traka će se pojaviti pri dnu prozora. Ploča ispod alatne trake će se također pojaviti i prikazati HTML kôd na aktivnoj stranici.
Korak 4. Upoznajte se s postojećim alatnim trakama i pločama
Kada koristite "Inspect Element", nekoliko prozora će se otvoriti ispod prozora pregledača. U nastavku su opisani nazivi i funkcije alatnih traka i ploča u odjeljku "Pregled elementa":
- U gornjem redu nalazi se Toolbar Toolbar. Ovdje se može pronaći nekoliko alata, ali mi ćemo se fokusirati na dugme Inspector na lijevoj strani. Uvjerite se da je ovo dugme aktivno (označeno bojom dugmeta koje postaje plavo kada je aktivno) u ovom vodiču.
- Ispod toga nalazi se red mrvica HTML elemenata koji označavaju lokaciju trenutno odabranog elementa.
- Okno ispod navigacijskih upita prikazuje 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 traka s alatima otvorena, možete lako odabrati druge elemente. Postoje tri načina da to učinite:
- Zadržite pokazivač miša iznad linije HTML -a za označavanje odabranog elementa (za ovu funkciju je potreban Firefox 34+). Pritisnite HTML da biste odabrali taj element.
- Kliknite na alatku "Odaberi element" u lijevom kutu alatne trake: ona ima ikonu u obliku kursora iznad okvira. Pomaknite kursor na web stranici da označite element i kliknite da biste ga odabrali.
Korak 6. Pratite HTML kôd
Kliknite bilo gdje u HTML oknu. Koristite lijevi i desni taster za usmjeravanje na tastaturi za prelazak sa koda na kod (za ovu funkciju je potreban Firefox 39+). Ova metoda je 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 uglu reda prezla. Kliknite za proširenje polja za pretraživanje i upišite HTML kôd koji želite pretraživati. Dok kucate, pojavit će se skočni prozor s odgovarajućim rezultatima pretraživanja. Kliknite na 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 da biste započeli iznova
Ako ste tek počeli s alatima za razvoj web stranica, imajte na umu da ne vršite trajne promjene na stranicama koje uređujete. Vaše izmjene pojavljuju se samo na vašem ekranu sve dok ponovo 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. Kliknite i držite alat u mrvici za prikaz dodatnih opcija
Imajte na umu da se alatna traka sa 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 sveobuhvatne):
- "Uredi kao HTML" omogućuje vam uređivanje cijelog HTML sadržaja iz HTML stabla umjesto uređivanja svakog retka.
- "Kopiraj unutrašnji HTML" kopira cijeli sadržaj unutar čvora, dok "Kopiraj vanjski HTML" kopira sadržaj i čvorove (kao što su ili
- "Zalijepi →" prikazuje nekoliko opcija za mjesto lijepljenja kopije, na primjer prije čvora ili nakon prvog djeteta čvora.
- : hover,: active i: focus menjaju izgled elementa kada korisnik stupi u interakciju. Promijenjeni efekti definirani su iz CSS -ove tablice stilova (može se uređivati s ploče s desne strane).
Korak 4. Povucite i ispustite
Da biste preuredili elemente 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 tamo gdje želite.
Ova funkcija zahtijeva Firefox 39 i novije verzije
Korak 5. Zatvorite traku s alatima za 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 menija 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 uglu reda za prezle i desno od polja za pretraživanje. Kliknite ovu ikonu da biste sakrili CSS ploču, a zatim ponovo kliknite da biste je prikazali.
- Možete i uređivati CSS ploče, ali one nisu navedene u ovom članku. Upute za uređivanje CSS koda možete pronaći na internetu.
