Detaljeret CSS Inspector på hvert websted med CSSPeeper til Chrome

Det almindelige Chrome DevTools-panel er skørt kraftigt. Det lader nogen dykke dybt ind i en hvilken som helst side for at studere et websteds layout, CSS og endda HTTP-overskrifter, hvis det er nødvendigt.

Du kan gøre meget med DevTools CSS inspektøren. Men det har ikke et klart GUI-panel, og det er en ting, som hver udvikler ville elske.

Tjek CSSPeeper, en gratis Chrome-udvidelse, der tilføjer denne GUI-inspektør til din browser. Det lader dig studere CSS-egenskaberne for ethvert element på en hvilken som helst side, selv om det kun er bygget til Chrome lige nu.

Én gang installeret du bare besøg en webside og klik på udvidelsens hovedknap i Chrome-tilføjelsesbjælken. Et nyt inspektionsvindue vises øverst på websiden med detaljer om hvert hovedelement.

Når du gennemser webstedet, kan du klikke på et hvilket som helst element, du ser med en stiplet omrids. Dette kan omfatte knapper, sideafsnit, overskrifter, navigationsartikler, du navngiver det.

Derfra får du en hel inspektør med detaljer om typografi, farvevalg og skrifttypestile. Det er en fantastisk måde at Træk stilarter direkte fra en webside uden at grave ind i CSS-koden selv.

CSSPeeper tillader dig selv Vælg relaterede farver med en indbygget farvevælger og farveskema generator. Du kan eksportere billeder fra sider, opbygge dine egne farveskemaer og anvende disse i dine egne mockups med Photoshop eller Sketch.

Jeg primært anbefaler denne udvidelse til designere i stedet for udviklere, da det er et meget mere designvenligt plugin, der trækker rå CSS og transformerer koden i letlæsbare databasker.

Men dette plugin kan også hjælpe udviklere også! Det er virkelig en kraftfuldt webstedskontrolværktøj til alle typer CSS.

Tag et kig på CSSPeeper hjemmeside for at lære mere om, hvad det kan gøre. Hovedsiden indeholder også et link til Chrome-butikken, så du kan installere udvidelsen gratis og tage det ud til en testkørsel.