Detaljert CSS Inspector på hvert nettsted med CSSPeeper for Chrome

Det vanlige Chrome DevTools-panelet er galt kraftig. Det lar noen dykke dypt inn i hvilken som helst side for å studere et nettsteds layout, CSS, og til og med HTTP-overskrifter om nødvendig.

Du kan gjøre mye med DevTools CSS inspektøren. Men det har ikke et klart GUI-panel, og det er en ting hver utvikler ville elske.

Sjekk ut CSSPeeper, en gratis Chrome-utvidelse som legger til denne GUI-inspektøren i nettleseren din. Det lar deg studere CSS-egenskapene til ethvert element på en hvilken som helst side, selv om den bare er bygget for Chrome akkurat nå.

En gang installert du bare besøk en nettside og klikk på utvidelsens hovedknapp i Chrome-tilleggsradien. Et nytt inspeksjonsvindu vises øverst på nettsiden med detaljer om hvert hovedelement.

Når du blar gjennom nettstedet, kan du klikke på et hvilket som helst element du ser med en stiplet oversikt. Dette kan inkludere knapper, sidestykker, overskrifter, navigasjonsartikler, du nevner det.

Derfra får du en hel inspektør med detaljer om typografi, fargevalg og skriftstiler. Det er en fin måte å trekk stiler direkte fra en nettside uten å grave inn i CSS-koden selv.

CSSPeeper lar deg selv velg relaterte farger med en innebygd fargeplukker og fargeskjema generator. Du kan eksportere bilder fra sider, bygge egne fargeskjemaer, og Bruk disse inn i dine egne mockups med Photoshop eller Sketch.

Jeg primært Anbefal denne utvidelsen for designere i stedet for utviklere, da det er et mye mer designervennlig plugin som trekker rå CSS og forvandler koden til lettlestede datatyper.

Men dette pluginet kan også hjelpe utviklere også! Det er virkelig en kraftig nettsted inspeksjon verktøy for alle typer CSS.

Ta en titt på CSSPeeper-hjemmesiden for å lære mer om hva den kan gjøre. Hovedsiden inneholder også en kobling til Chrome-butikken, slik at du kan installere utvidelsen gratis og ta den ut for en testkjøring.