Šioje pamokoje parodysiu, kaip veiksmingai tikrinti ir redaguoti svetainės DOM (dokumento objekto modelio) struktūrą naudojant " Chrome" programuotojo įrankius. Skirtukas Elementai yra galingas įrankis, padedantis suprasti puslapio HTML kodą, pasirinkti elementus ir keisti jų savybes realiuoju laiku. Nesvarbu, ar esate žiniatinklio kūrėjas, dizaineris, ar tiesiog smalsuolis, šios žinios būtinos norint geriau analizuoti ir pritaikyti svetaines.
Pagrindinės žinios
- Naudodami "Chrome" programuotojo įrankius galite įvairiais būdais tikrinti HTML elementus, analizuoti CSS stilius ir atlikti tiesioginius pakeitimus.
- Išmoksite pasirinkti elementus, suprasti DOM struktūros hierarchiją ir koreguoti stilistines savybes.
Žingsnis po žingsnio vadovas
Prieiga prie skirtuko Elementai
Norėdami atverti "Chrome Developer Tools" skirtuką "Elements", galite tiesiog dešiniuoju pelės klavišu spustelėti bet kurį tinklalapio elementą ir pasirinkti "Explore" (tyrinėti). Taip pat galite naudoti klavišų kombinaciją F12 arba Ctrl + Shift + I (Windows), arba Command + Option + I (Mac), kad atidarytumėte "Developer Tools".
HTML elemento pasirinkimas
Jei norite patikrinti konkretų elementą, galite pasinaudoti greitojo pasirinkimo funkcija. Spustelėkite piktogramą su punktyriniu stačiakampiu (Select an element in the page to inspect it). Taip galite tiesiogiai spragtelėti tinklalapio elementus.
Spustelėjus elementą, jis automatiškai bus paryškintas skirtuke Elementai ir galėsite matyti DOM struktūros hierarchiją.
DOM struktūros naršymas
DOM struktūroje galite matyti elementų įterpimą. Norėdami daugiau sužinoti apie hierarchiją, galite išskleisti ir suvynioti elementus. Tai ypač naudinga norint atpažinti susijusius elementus ir jų ryšius.
Rodyklių klavišų naudojimas
Patogi funkcija - galimybė rodyklių klavišais judėti aukštyn ir žemyn ir pasirinkti skirtingus hierarchijos elementus. Šis būdas palengvina naršymą DOM struktūroje.
Konkrečių elementų paieška
Norėdami ieškoti konkretaus turinio, galite naudoti funkciją "Ieškoti". Paspauskite Ctrl + F (Windows) arba Command + F (Mac) ir įveskite paieškos žodį. Taip galite greitai rasti atitinkamus elementus, pavyzdžiui, ID ar klases.
CSS stilių tikrinimas
Vos tik pasirinkę elementą, pereikite į dešinėje elemento skirtuko pusėje esančią sritį "Stiliai". Čia galite peržiūrėti visas pasirinktam elementui taikomas CSS taisykles. Viršuje matysite įvestus stilius, po jų - išorines CSS taisykles.
Jei spustelėsite konkrečią CSS taisyklę, būsite nukreipti tiesiai į tą stilių rinkinio vietą, kurioje ši taisyklė apibrėžta. Tai labai naudinga norint sužinoti, iš kur paimti tam tikri stiliai ir kokia jų struktūra.
Supratimas apie perrašytus stilius
Dažnai pasitaiko, kad kai kurios CSS taisyklės yra perrašomos. Tai atpažinsite iš to, kad jos rodomos perbrauktos. Srityje "Stiliai" galite patekti į skyrių "Apskaičiuota" ir pamatyti, koks stilius galiausiai pritaikytas elementui.
Atlikite tiesioginius koregavimus
Galite lengvai koreguoti CSS stilių reikšmes. Spustelėkite norimą pakeisti reikšmę ir įveskite naują reikšmę. Rezultatas matomas iš karto. Pakeitimus taip pat galite atšaukti spustelėję šalia atskirų CSS taisyklių rodomą simbolį "X".
Naudojimasis "JavaScript" konsole
Programuotojo įrankiai taip pat siūlo konsolę, kurioje galite vykdyti "JavaScript" kodą. Tai naudinga norint atlikti dinaminius svetainės pakeitimus ir išbandyti, kaip skriptai reaguoja į įvairius elementus.
Apibendrinimas
Šioje pamokoje sužinojote, kaip veiksmingai naudoti "Chrome" programuotojo įrankius svetainės DOM struktūrai tikrinti. Taip pat sužinojote, kaip pasirinkti elementus, analizuoti CSS stilius ir atlikti tiesioginius pakeitimus. Įgiję šių įgūdžių, galite gerokai patobulinti žiniatinklio svetainių kūrimą ir dizainą.
Dažniausiai užduodami klausimai
Kas yra "Chrome Developer Tools"?"Chrome Developer Tools" - tai "Google Chrome" integruotos priemonės, padedančios kūrėjams tikrinti, derinti ir optimizuoti svetaines.
Kaip galiu pasirinkti konkretų elementą? Elementą galite pasirinkti dešiniuoju pelės klavišu spustelėję ant jo ir pasirinkę "Inspect" arba naudodami pasirinkimo įrankį skirtuke "Elements".
Ką reiškia, jei CSS stilius yra perbrauktas? Perbrauktas CSS stilius reiškia, kad šis stilius buvo pakeistas kita elementui taikoma taisykle.
Kaip pakeisti CSS reikšmes skirtuke Elementai? CSS reikšmes galite keisti spustelėdami reikšmę skyriuje Stilius ir įvesdami naują reikšmę.
Kaip sužinoti, kurios CSS taisyklės taikomos elementui? Kortelės "Elementai" skiltyje "Stiliai" galite matyti visas taikomas CSS taisykles ir spustelėti "Apskaičiuota", kad pamatytumėte galutines vertes, kurios iš tikrųjų naudojamos.
