„Inspect Element“yra „Firefox“naršyklės kūrėjo įrankis, kurį galite naudoti norėdami sekti HTML kodą bet kuriame tinklalapyje. Tinklalapio HTML ir CSS stiliaus lapus galima redaguoti naudojant „Inspect Element“. Galite pabandyti redaguoti puslapį, kaip jums patinka, ir atkurti jį tokį, koks buvo, tiesiog iš naujo įkeliant redaguotą tinklalapį.
Žingsnis
1 dalis iš 2: Elementų tikrinimas
Žingsnis 1. Atnaujinkite „Firefox“(pasirenkama)
Jei naudojate senesnę „Firefox“versiją, gali būti, kad negalėsite pasiekti šiame straipsnyje aptartų funkcijų. Naujinimas bus įdiegtas automatiškai, kai patikrinsite, kurią „Firefox“versiją naudojate.
„Firefox 9“ir ankstesnėse versijose apskritai nėra įrankio „Tikrinti elementą“
Žingsnis 2. Dešiniuoju pelės mygtuku spustelėkite bet kurį tinklalapio elementą
Galite dešiniuoju pelės klavišu spustelėti bet kurį vaizdą, tekstą, foną ar elementą. Jei pelė turi tik vieną mygtuką, spustelėjus kairįjį klavišą ir „Control“klavišą, paspaudžiamas dešinysis pelės mygtukas.
Žingsnis 3. Išskleidžiamajame meniu spustelėkite „Tikrinti elementą“
Lango apačioje pasirodys įrankių juosta. Po įrankių juosta taip pat pasirodys skydelis, kuriame aktyviame puslapyje bus rodomas HTML kodas.
Žingsnis 4. Susipažinkite su esamomis įrankių juostomis ir skydeliais
Kai naudojate „Inspect Element“, po naršyklės langu atsidarys keletas skydelių. Toliau aprašomi įrankių juostų ir skydų pavadinimai ir funkcijos skyriuje „Tikrinti elementą“:
- Viršutinėje eilutėje yra įrankių juostos įrankių juosta. Čia galima rasti keletą įrankių, tačiau mes sutelksime dėmesį į mygtuką Inspektorius kairėje. Įsitikinkite, kad šiame vadove šis mygtukas yra aktyvus (pažymėtas mygtuko spalva, kuri aktyviai tampa mėlyna).
- Žemiau yra HTML elementų džiūvėsėlių eilutė, nurodanti šiuo metu pasirinkto elemento vietą.
- Lange po naršymo raginimais rodomas tinklalapio HTML medis arba „Žymėjimo vaizdas“. Pasirinkto elemento HTML bus pažymėtas ir centre.
- Dešinėje esančioje srityje rodomas dabartinio tinklalapio CSS stiliaus lapas.
Žingsnis 5. Pasirinkite kitą elementą
Kai įrankių juosta yra atidaryta, galite lengvai pasirinkti kitus elementus. Yra trys būdai tai padaryti:
- Užveskite pelės žymeklį virš HTML eilutės, kad pažymėtumėte pasirinktą elementą (šiai funkcijai reikalingas „Firefox 34+“). Spustelėkite HTML, kad pasirinktumėte tą elementą.
- Spustelėkite įrankį „Pasirinkti elementą“, esantį kairiajame įrankių juostos kampe: virš langelio yra žymeklio formos piktograma. Perkelkite žymeklį ant tinklalapio, kad pažymėtumėte elementą, ir spustelėkite, kad jį pasirinktumėte.
Žingsnis 6. Atsekite HTML kodą
Spustelėkite bet kurią HTML srities vietą. Norėdami pereiti nuo kodo prie kodo, naudokite klaviatūros kairįjį ir dešinįjį kryptinius klavišus (šiai funkcijai reikalingas „Firefox 39+“). Šis metodas yra naudingas pasirenkant elementus, kurie yra per maži, kad juos būtų galima pasirinkti žymekliu.
- Pilkas HTML nurodo elementus, kurie nerodomi puslapyje. Į tai įtraukti elementai yra komentarai, pvz., Mazgai, ir kiti CSS ekrano ypatybės paslėpti elementai.
- Spustelėkite rodyklę kairėje dėžutės pusėje, kad parodytumėte arba paslėptumėte turinį. Norėdami rodyti visą turinį, laikykite nuspaudę alt=„Vaizdas“arba parinktį, kol spustelėsite rodyklę.
Žingsnis 7. Raskite elementą
Ieškokite paieškos lauko (kilpos formos piktograma) dešiniajame džiūvėsėlių eilutės kampe. Spustelėkite, kad išplėstumėte paieškos lauką ir įveskite HTML kodą, kurio norite ieškoti. Kai įvesite tekstą, bus rodomas iššokantis langas, kuriame bus rodomi atitinkami paieškos rezultatai. Spustelėkite elementą paieškos rezultatuose ir slinkite HTML sritį iki ieškomo kodo.
2 dalis iš 2: HTML redagavimas
1 veiksmas. Iš naujo įkelkite puslapį, kad pradėtumėte iš naujo
Jei dar nesate susipažinę su svetainių kūrimo įrankiais, atminkite, kad neatliekate nuolatinių pakeitimų redaguojamuose puslapiuose. Jūsų pakeitimai rodomi ekrane tik tol, kol iš naujo įkeliate arba uždarote puslapį. Nesivaržykite eksperimentuoti, net jei nežinote, kas atsitiks.
Žingsnis 2. Dukart spustelėkite HTML, kad galėtumėte redaguoti
Dukart spustelėkite eilutinį HTML. Įveskite naują tekstą ir paspauskite „Enter“, kad išsaugotumėte pakeitimus.
Žingsnis 3. Spustelėkite ir palaikykite įrankį naršymo juostoje, kad būtų parodyta daugiau parinkčių
Atminkite, kad naršymo įrankių juosta yra tarp HTML medžio ir virš jo esančios įrankių juostos. Spustelėkite ir palaikykite šios eilutės įrankį, kad atidarytumėte daugiau meniu. Žemiau pateikiama galimų parinkčių užuomina (ne išsami):
- „Redaguoti kaip HTML“leidžia redaguoti visą HTML turinį tiesiogiai iš HTML medžio, o ne redaguoti kiekvieną eilutę.
- „Kopijuoti vidinį HTML“nukopijuoja visą turinį mazgo viduje, o „Kopijuoti išorinį HTML“- turinį ir mazgus (pvz., Arba
- „Įklijuoti →“pateikia kelias parinktis, kur įklijuoti kopiją, pvz., Prieš mazgą arba po pirmojo mazgo antrinio elemento.
- : hover,: active ir: focus pakeičia elemento išvaizdą, kai vartotojas sąveikauja. Pakeisti efektai apibrėžiami CSS stiliaus lape (redaguojama iš skydelio dešinėje).
Žingsnis 4. Vilkite ir numeskite
Norėdami pertvarkyti kodo elementus, spustelėkite ir palaikykite HTML, kol pasirodys punktyrinė linija. Perkelkite liniją aukštyn ir žemyn medžiu ir atleiskite pelės mygtuką, kai linija yra ten, kur norite.
Šiai funkcijai reikalingas „Firefox 39“ir naujesnės versijos
5 veiksmas. Uždarykite kūrėjo įrankių juostą
Norėdami uždaryti visą „Inspect Element“langą, spustelėkite mygtuką X viršutiniame dešiniajame įrankių juostos kampe, esančiame virš CSS skydelio.
Patarimai
- Įrankių juostą taip pat galite atidaryti iš meniu parinkčių lango viršuje:
- „Windows“: „Firefox“→ „Web Developer“→ „Toggle Tools“
- „Mac“arba „Linux“: Įrankiai → Žiniatinklio kūrėjas → Perjungti įrankius
- „Firefox 40“turi galimybę paslėpti CSS skydelį, kad turėtumėte daugiau vietos redaguoti HTML. Ieškokite rodyklės piktogramos dešiniajame džiūvėsėlių eilutės kampe ir paieškos lauko dešinėje. Spustelėkite šią piktogramą, kad paslėptumėte CSS skydelį, ir dar kartą spustelėkite, kad ją atidarytumėte.
- Taip pat galite redaguoti CSS skydelius, tačiau jie nėra išvardyti šiame straipsnyje. CSS kodo redagavimo instrukcijas galite rasti internete.
