Detaljerad CSS Inspector på varje webbplats med CSSPeeper för Chrome

Den vanliga Chrome DevTools-panelen är galen kraftfull. Det låter någon dyka djupt in i någon sida för att studera en webbplatss layout, CSS och till och med HTTP-rubriker om det behövs.

Du kan göra mycket med DevTools CSS inspektör. Men det har inte en tydlig GUI-panel och det är en sak varje utvecklare skulle älska.

Kolla in CSSPeeper, en gratis Chrome-tillägg som lägger till denna GUI-inspektör i din webbläsare. Det låter dig studera CSS-egenskaperna för något element på en sida, även om det bara är byggt för Chrome just nu.

En gång installerat du bara Besök en webbsida och klicka på förlängningens huvudknapp i Chrome-tilläggsfältet. Ett nytt inspektionsfönster visas på toppen av webbsidan med detaljer om varje huvudelement.

När du bläddrar igenom webbplatsen kan du klicka på vilket element du ser med en prickad kontur. Detta kan innehålla knappar, sidavsnitt, rubriker, navigationsobjekt, du heter det.

Därifrån får du en hel inspektör med detaljer om typografi, färgval och typsnittstyp. Det är ett bra sätt att dra stilar direkt från en webbsida utan att själv gräva in i CSS-koden.

CSSPeeper låter dig även Välj relaterade färger med en inbyggd färgplockare och färgschemangenerator. Du kan exportera bilder från sidor, bygga egna färgscheman och Applicera dessa i dina egna mockups med Photoshop eller Sketch.

Jag primärt rekommendera denna tillägg för designers istället för utvecklare eftersom det är ett mycket mer designvänligt plugin som drar obehandlad CSS och omvandlar koden till lättlästa datatyper.

Men det här plugin kan också hjälpa utvecklare! Det är verkligen en kraftfullt platsinspektionsverktyg för alla typer av CSS.

Ta en titt på CSSPeeper-hemsidan för att lära dig mer om vad det kan göra. Huvudsidan innehåller också en länk till Chrome-butiken så att du kan installera tillägget gratis och ta ut det för en testkörning.