CSS Inspector on võimas arendustööriist, mis võimaldab teil vaadata mis tahes elemendi täielikke CSS-omadusi, liigutades lihtsalt hiirekursori selle kohale. Klõpsake stiilide lukustamiseks, redigeerige neid otse ja vaadake, kuidas muudatused rakenduvad kohe lehel.
Olenemata sellest, kas otsite paigutusvea põhjust, uurite mõnda teie meelest õnnestunud disainilahendust või kontrollite lihtsalt vahede ja tüpograafia väärtusi, annab CSS Inspector kogu vajaliku info puhtas ujuvas paneelis. Erinevalt brauseri arendajatööriistadest ei jää see teile jalgu ette — ei ankurdatud paneele, ei muudetud vaateakna suurust. Lihtsalt liigutage hiirt, klõpsake ja uurige. Tööriist näitab arvutatud stiile (seda, mida brauser tegelikult renderdab), mitte ainult kirjutatud CSS-i. See tähendab, et näete tegelikke väärtusi pärast pärimise, spetsiifilisuse ja kaskaadi lahendamist — samu väärtusi, mis mõjutavad seda, mida kasutaja ekraanil näeb.
Elemendi uurimine ei käivita kunagi lehe uuesti paigutust ega ümberjoonistamist, nii et saate vabalt ringi vaadata, muretsemata kerimisasendi, animatsioonide või JavaScripti oleku segamise pärast. Toetatud on ka pseudoelemendid nagu ::before ja ::after — liikuge hiirega üle vanemelemendi ning paneel näitab genereeritud sisu stiile eraldi elemendi enda stiilidest. CSS-i kohandatud omadused (muutujad) lahendatakse nende lõpliku arvutatud väärtuseni, kuid paneel näitab ka muutuja nime, mis selle väärtuse tekitas, nii et saate värvi- või vahekauguse väärtuse jälitada tagasi selle disainitokeni allikani, mitte ei näe lihtsalt toorest pikslinumbrit.
Igapäevases kasutuses pöördub enamik arendajaid CSS Inspectori poole kümneid kordi seansi jooksul — kontrollides, miks marginaal kokku kukkus, kinnitades hex-koodi enne selle stiililehte kopeerimist või veendudes, et meediapäringu murdepunkt rakendas tõesti ette nähtud stiilid. Kuna tegu on ujuva paneeliga, mitte kogu brauserit hõlmava režiimiga, saate selle avatuna hoida, kui vahetate vahekaarti, et kontrollida oma koodiredaktorit või disainifaili, ning naasta otse sama üle liigutatud elemendi juurde, ilma et kaotaksite oma koha.
Vaadake kohe fonte, suurusi, värve, vahesid ja muud, kui liigute mis tahes elemendi kohal.
Klõpsake elemendil paneeli lukustamiseks ja selle peitmise vältimiseks, võimaldades üksikasjalikku uurimist.
Topeltklõpsake väärtustel, et neid otse muuta. Teie muudatused kajastuvad kohe lehel.
Kopeerige üksikud omadused või kogu stiiliplokk lõikelauale ühe klikiga.
Vaadake veise-, piirde- ja sisemist vahet visuaalselt.
Vaadake elemendi laiust, kõrgust ja asukohta lehel.
CSS Inspector kuvab üle 40 omaduse:
font-familyfont-sizefont-weightline-heightletter-spacingtext-aligntext-transformcolorwidthheightpaddingmarginborderborder-radiusbox-sizingdisplaypositiontoprightbottomleftz-indexfloatoverflowbackground-colorbackground-imagebackground-sizebackground-positionopacitybox-shadowtext-shadowtransformtransitioncursorUurige valesti joondatud elemente täpselt.
Uurige oma lemmikveebisaitide stiile.
Testige muudatusi enne koodi kirjutamist.
Näidake muudatusi reaalajas kohtumiste käigus.
Hankige hõlpsalt CSS-kood uute elementide jaoks.
Klõpsake DevSuite Pro tööriistaribalt CSS Inspectori ikooni.
Hõljutage kursorit mis tahes elemendi kohal, et näha selle omadusi.
Klõpsake elemendil paneeli kinnitamiseks.
Topeltklõpsake väärtustel nende kohandamiseks.
Kopeerige muudetud kood ja kasutage seda oma projektis.
Paigaldage DevSuite Pro tasuta ja avage 64+ arendustööriista oma brauserile.