"Inspect Element" je orodje za razvijalce v brskalniku Firefox, s katerim lahko sledite kodi HTML na kateri koli spletni strani. Slog slogov HTML in CSS spletne strani je mogoče urediti z "Preglejte element". Lahko poskusite urediti stran, kot želite, in jo vrniti v prvotno stanje, tako da preprosto znova naložite urejeno spletno stran.
Korak
1. del od 2: Preverjanje elementov
Korak 1. Posodobite Firefox (neobvezno)
Če uporabljate starejšo različico Firefoxa, morda ne boste mogli dostopati do funkcij, opisanih v tem članku. Posodobitev bo samodejno nameščena, ko preverite, katero različico Firefoxa uporabljate.
Firefox 9 in starejše različice sploh nimajo orodja "Inspect Element"
Korak 2. Z desno miškino tipko kliknite kateri koli element spletne strani
Z desno miškino tipko kliknite katero koli sliko, besedilo, ozadje ali element. Če ima miška samo en gumb, bo kombinacija levega klika in tipke Control povzročila desni klik.
Korak 3. V spustnem meniju kliknite "Preveri element"
Na dnu okna se prikaže orodna vrstica. Prikazala se bo tudi plošča pod orodno vrstico, ki bo na aktivni strani prikazala kodo HTML.
Korak 4. Spoznajte obstoječe orodne vrstice in plošče
Ko uporabite "Preglejte element", se pod oknom brskalnika odpre več plošč. V nadaljevanju so opisana imena in funkcije orodnih vrstic in plošč v "Preglejte element":
- V zgornji vrstici je orodna vrstica Toolbox. Tu lahko najdete več orodij, vendar se bomo osredotočili na gumb Inšpektor na levi. Prepričajte se, da je ta gumb v tem priročniku aktiven (označen z barvo gumba, ki postane modra).
- Pod tem je vrstica drobtin drobcev elementov HTML, ki označuje lokacijo trenutno izbranega elementa.
- Podokno pod navigacijskimi pozivi prikazuje drevo HTML ali "Pogled oznak" spletne strani. HTML izbranega elementa bo v tem podoknu označen in centriran.
- Podokno na desni prikazuje slog slogov CSS trenutne spletne strani.
Korak 5. Izberite drug element
Ko je orodna vrstica odprta, lahko preprosto izberete druge elemente. To lahko storite na tri načine:
- Premaknite miškin kazalec nad vrstico HTML, da označite izbrani element (za to funkcijo je potreben Firefox 34+). Kliknite HTML, da izberete ta element.
- V levem kotu orodne vrstice kliknite orodje »Izberi element«: nad poljem ima ikono v obliki kazalke. Premaknite kazalec na spletni strani, da označite element, in kliknite, da ga izberete.
Korak 6. Sledite kodi HTML
Kliknite kjer koli v podoknu HTML. Za premikanje od kode do kode uporabite levo in desno smerno tipko na tipkovnici (za to funkcijo je potreben Firefox 39+). Ta metoda je uporabna za izbiro premajhnih elementov, da bi jih lahko izbrali s kazalcem.
- Zatemnjen HTML označuje elemente, ki niso prikazani na strani. Elementi, vključeni v to, so komentarji, kot so vozlišča, in drugi elementi, ki jih skriva lastnost prikaza CSS.
- Kliknite puščico na levi strani polja, če želite prikazati ali skriti vsebino. Če želite prikazati celotno vsebino, pridržite alt="Slika" ali možnost, medtem ko kliknete puščico.
Korak 7. Poiščite element
Poiščite iskalno polje (ikona v obliki zanke) v skrajnem desnem kotu vrstice drobtin. Kliknite za razširitev iskalnega polja in vnesite kodo HTML, ki jo želite poiskati. Med tipkanjem se prikaže pojavno okno z ustreznimi rezultati iskanja. Kliknite element v rezultatih iskanja in se pomaknite v podokno HTML do kode, ki jo iščete.
2. del 2: Urejanje HTML -ja
Korak 1. Znova naložite stran, da začnete znova
Če ste šele začeli uporabljati orodja za razvoj spletnih mest, se zavedajte, da ne spreminjate trajno strani, ki jih urejate. Vaši popravki bodo prikazani samo na zaslonu, dokler ne naložite ali zaprete strani. Poskusite, tudi če ne veste, kaj se bo zgodilo.
Korak 2. Dvokliknite HTML za urejanje
Dvokliknite vgrajeni HTML. Vnesite novo besedilo in pritisnite Enter, da shranite spremembe.
Korak 3. Kliknite in držite orodje v drobtinici, da prikažete več možnosti
Upoštevajte, da orodna vrstica z drobtinami stoji med drevesom HTML in orodno vrstico nad njim. Kliknite in pridržite orodje v tej vrstici, da odprete več menijev. Spodaj je namig o razpoložljivih možnostih (ki niso izčrpne):
- »Uredi kot HTML« vam omogoča neposredno urejanje vse vsebine HTML iz drevesa HTML namesto urejanja vsake vrstice.
- »Kopiraj notranji HTML« kopira celotno vsebino v vozlišču, medtem ko »Kopiraj zunanji HTML« kopira vsebino in vozlišča (na primer oz.
- "Prilepi →" prikaže več možnosti, kam prilepite kopijo, na primer pred vozliščem ali po prvem podrejenem vozlišču.
- : hover,: active in: focus spremeni videz elementa, ko uporabnik komunicira. Spremenjeni učinki so določeni iz slogovne liste CSS (mogoče urejati na plošči na desni).
Korak 4. Povlecite in spustite
Če želite preurediti elemente v kodi, kliknite in pridržite HTML, dokler se ne prikaže črtkana črta. Premaknite črto navzgor in navzdol po drevesu in spustite gumb miške, ko je črta tam, kjer želite.
Ta funkcija zahteva Firefox 39 in novejše
Korak 5. Zaprite orodno vrstico razvijalca
Če želite zapreti celotno okno Inspect Element, kliknite gumb X v zgornjem desnem kotu orodne vrstice nad ploščo CSS.
Nasveti
- Orodno vrstico lahko odprete tudi v menijskih možnostih na vrhu okna:
- Windows: Firefox → Spletni razvijalec → Preklopi orodja
- Mac ali Linux: Orodja → Spletni razvijalec → Preklopi orodja
- Firefox 40 ima možnost, da skrije ploščo CSS, tako da imate več prostora za urejanje HTML -ja. Poiščite ikono puščice v skrajnem desnem kotu vrstice drobtin in desno od iskalnega polja. Kliknite to ikono, če želite skriti ploščo CSS, in znova kliknite, da jo prikažete.
- Prav tako lahko urejate plošče CSS, vendar v tem članku niso navedene. Navodila za urejanje kode CSS najdete na internetu.
