Chrome in pregled elementov

V brskalniku Chrome odprite poljubno spletno stran.

Pregledovanje elementov na strani odpremo tako, da z desnim miškinim gumbom kliknemo na poljuben element na strani ...

... ter v meniju izberemo možnost Preglej element.

Prikaže se nam HTML koda trenutno prikazane spletne strani.


V tem pogledu vedno vidimo vsebino, ki je dejansko prikazana. Ker so mnoge strani narejene dinamično, se ta koda lahko razlikuje od HTML kode, ki se naloži ob odprtju strani, zato je ta pogled pri takih straneh zelo uporaben.

Na desni strani lahko najdemo oblikovne CSS stile, ki so uporabljeni.

Če želimo, lahko tudi spreminjamo ali dodajamo lastnosti posameznim CSS stilom.

V prejšnjem koraku sem spremenil prosojnost slike (opacity) in kot opazimo, so spremembe na strani vidne takoj in ni potrebno ponovno nalaganje strani.

Razvijalci spletnih strani na ta način hitro testirajo razne oblikovne možnosti in jih prenesjo v dejansko kodo šele, ko so zadovoljni z rezultatom.

Če odpremo zavihek Computed, lahko vidimo točne dimenzije, ki jih zaseda posamezni element.

V zavihku Network vidimo, katere dokumente je naložila spletna stran.

Zraven vidimo tudi čase njihovega nalaganja.

Za razvijalce je pomemben zavihek Sources, kjer si lahko ogledamo Javascript programsko kodo, ki se uporablja na strani.

V kolikor pri določeni vrstici programske kode kliknemo ob desnem robu. Na ta način dosežemo, da se bo izvajanje funkcije na tem mestu ustavilo.

S tem lahko točno preverimo, kaj se dogaja pri izvajanju funkcije.

Na koncu se nahaja tudi zavihek Console.

V njem se izpisujejo razne napake v Javascriptu, ki se pojavljajo na strani.

Lahko pa na tem mestu tudi direktno izvajamo Javascript ukaze.


Na koncu bi še predlagal, da stvar kar preizkusite v praksi, saj boste tako najbolje spoznali delovanje. V primeru vprašanj pa smo seveda na volju na forumu.