CSS Inšpektor je zmogljivo, brezplačno orodje za razvijalce, ki vam omogoča, da premaknete kazalec nad katerikoli element na spletni strani in takoj vidite njegove izračunane CSS lastnosti.
Ne glede na to, ali odpravljate težavo s postavitvijo, obratno inženirstvo raziskujete oblikovanje, ki vam je všeč, ali pa samo hitro preverjate vrednosti razmikov in tipografije, vam CSS Inšpektor ponudi vse, kar potrebujete, v čisti plavajoči plošči. Za razliko od brskalnikovih DevTools vam ne stoji na poti – brez zasidranih plošč, brez spremenjene velikosti okna. Samo premaknite miško, kliknite in preglejte. Orodje prikazuje izračunane sloge (computed styles) – torej to, kar brskalnik dejansko izriše, ne le avtorsko napisan CSS. To pomeni, da vidite prave vrednosti po tem, ko so razrešeni dedovanje, specifičnost in kaskadiranje – iste vrednosti, ki vplivajo na to, kar uporabniki vidijo na zaslonu.
Pregledovanje elementa nikoli ne sproži ponovnega preloma (reflow) ali ponovnega izrisa (repaint) strani same, zato lahko prosto raziskujete, ne da bi vas skrbelo, da boste porušili položaj drsenja, animacije ali stanje JavaScripta. Podprti so tudi psevdoelementi, kot sta ::before in ::after – ko z miško pojdite nad nadrejeni element, plošča prikaže sloge generirane vsebine ločeno od slogov samega elementa. CSS spremenljivke po meri (custom properties) se razrešijo v svojo končno izračunano vrednost, plošča pa vam poleg tega pokaže tudi ime spremenljivke, iz katere je vrednost izpeljana, tako da lahko barvo ali vrednost razmika izsledite nazaj do njenega izvora v oblikovalskih žetonih (design tokens), namesto da bi videli le golo številko v slikovnih pikah.
Pri vsakodnevni uporabi večina razvijalcev poseže po CSS Inšpektorju na desetine krat na sejo – da preveri, zakaj se je rob (margin) sesedel, potrdi hex kodo, preden jo prekopira v slogovno datoteko, ali se prepriča, da je prelomna točka media poizvedbe dejansko uveljavila sloge, ki naj bi jih. Ker gre za plavajočo ploščo in ne za način, ki zajame celoten brskalnik, jo lahko pustite odprto, medtem ko preklapljate med zavihki, da preverite svoj urejevalnik kode ali oblikovalsko datoteko, nato pa se vrnete naravnost na isti element, ne da bi izgubili mesto, kjer ste bili.
Takoj si oglejte pisave, velikosti, barve, razmike in še več, ko z miško pojdite čez kateri koli element.
Kliknite na element, da ploščo zaklenete, da ne izgine, kar omogoča podroben pregled.
Dvakrat kliknite na vrednosti, da jih neposredno spremenite. Vaši popravki se takoj odrazijo na strani.
Z enim klikom kopirajte posamezne lastnosti ali celoten blok slogov v odložišče.
Vizualno si oglejte vrednosti odmikov (margin), obrob (border) in notranjih odmikov (padding).
Prikaže širino, višino in položaj elementa na strani.
CSS Inspector prikazuje več kot 40 lastnosti:
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transformcolorwidthheightpaddingmarginborderborder-radiusbox-sizingdisplaypositiontoprightbottomleftz-indexfloatoverflowbackground-colorbackground-imagebackground-sizebackground-positionopacitybox-shadowtext-shadowtransformtransitioncursorNatančno preglejte neporavnane elemente.
Preučite sloge svojih najljubših spletnih mest.
Preizkusite spremembe, preden napišete kodo.
Pokažite spremembe v živo med sestanki.
Preprosto pridobite kodo CSS za nove elemente.
Kliknite ikono CSS Inspector v orodni vrstici DevSuite Pro.
Premaknite kazalec čez kateri koli element, da vidite njegove lastnosti.
Kliknite na element, da ploščo pripnete.
Dvakrat kliknite na vrednosti, da jih prilagodite.
Kopirajte posodobljeno kodo in jo uporabite v svojem projektu.
Namestite DevSuite Pro brezplačno in odklenite več kot 64 orodij za razvijalce za svoj brskalnik.