Topp 10 Chrome-tillägg och -verktyg för webbdesigners

Om du är designer i behov av några användbara verktyg för att snabba upp, samarbeta eller granska dina webbutvecklingsprojekt, har Chrome - tillägget en mängd verktyg.

Den här listan innehåller några av de mest populära – och vissa skulle hävda nödvändiga – verktyg och Chrome-tillägg(tools and Chrome extensions) som varje användare som utför designarbete borde ha i sin väska.

1. DomFlags

DOM Flags är en enkel att använda Chrome- tillägg som ger ett nytt sätt för utvecklare att arbeta med webbläsarverktyg. Det tillåter utvecklare att påskynda uppgiften att styla element.

Genom att använda kortkommandon för varje element kan du bokmärka din navigering.

Vi har alla upplevt svårigheten att inspektera mycket detaljerade element, och det är lätt att gå vilse.

DOM-flaggor(DOM Flags) gör att du kan spåra stylingelement, inklusive en funktion för att inspektera komponenter med exakthet automatiskt. Detta kommer i sin tur att hjälpa till att påskynda DevTools arbetsflöde och implementering.

Med DOM-flaggor(DOM Flags) kan du spåra ändringar. Och behåll ditt fokus på de element du arbetar med.

2. Sizzy

Sizzy ger designers och utvecklare ett enkelt sätt att testa sina webbplatser i flera visningsportar.

Sizzy ger ett enkelt sätt att kontrollera din design i realtid. Den erbjuder en interaktiv vy av valfritt antal enheter och skärmstorlekar. Du kan till och med simulera ett enhetstangentbord och sedan växla mellan liggande och stående läge.

Om du installerar ett Chrome- tillägg lägger du till en knapp i ditt verktygsfält, som när du klickar på den kommer att öppna den aktuella webbadressen(URL) på Sizzy- plattformen. Tillägget kommer att blockera alla " x-frame-options "-rubriker så att du kommer att kunna ta en titt på vilken webbplats som helst online.

Sizzy är ett projekt med öppen källkod, och du kan se hela koden här(here) .

3. Checkbot

Checkbot kan testa din webbplats för säkerhetsproblem och även granska din webbsidas laddningshastighet. Det kommer att ge designers ett sätt att identifiera typiska fel och rekommendera förbättringar av webbplatsens säkerhet, sökmotor och webbplatshastighet.

Med hjälp av mer än 50 mätvärden för bästa praxis kommer den att granska en webbplats för bästa praxis SEO , brutna länkar, dubblettinnehåll och mer. Verktyget kommer också att validera CSS , JS och HTML .

Checkbot upptäcker designer- och kodningsfel i realtid och sparar dig besväret att behöva gå tillbaka och kontrollera ditt arbete upprepade gånger.

Om du letar efter ett verktyg av god kvalitet som fixar trasiga sidlänkar, säkerställer unikt innehåll och sidtitlar och eliminerar omdirigeringskedjor skulle detta verktyg vara användbart.

För designers kan det hjälpa dig att minimera din CSS och JS samt ge rekommendationer om hur du kan minimera din CSS och utnyttja webbläsarcachen.

4. GistBox Clipper

GistBox är en av de mest användbara Chrome -tilläggen för webbdesigners.

GistBox kan skapa en GitHub Gist från vilket kodblock som helst på webbsidan du tittar på.

I det övre högra hörnet av ett kodblock ser du en liten knapp, som när den trycks ned tillåter en popup som låter dig spara koden i Gist .

Du kan skapa nya Gists med ett högerklick och spara kodblock för senare inspektion och användning.

Integrering med GitHub gör det möjligt för designers och utvecklare att samla in kodblock och manipulera dem eller kategorisera dem för senare användning. Detta gör det till ett bekvämt och effektivt Chrome- tilläggsverktyg.

5. ColorZilla

ColorZilla är ett otroligt användbart Chrome- tillägg för att samla in hex-koder som kan märkas, märkas och kategoriseras för individuella webbdesignprojekt.

Det låter dig välja ett pipettverktyg som extraherar färgen från vilken webbsida som helst och sparar den i ColorZillas(ColorZilla) urklipp.

Med den kan du snabbt utveckla färgpaletter för senare användning och som ett sätt att säkerställa att du använder färg konsekvent i webbdesign och utveckling.

ColorZilla fungerar också som en färganalysator och CSS - gradientredigerare så att du kan konvertera en bild till CSS .

6. WhatFont

 Detta Chrome-tillägg(Chrome Extension) är en verklig tidsbesparing för dem som vill använda sina favoritteckensnitt och integrera dem i sitt eget webbdesignprojekt.

WhatFont Chrome- tillägget låter utvecklare snabbt analysera och identifiera nästan alla teckensnitt på vilken webbsida som helst.

Tillägget är välutvecklat och istället för att behöva öppna inspektionsverktyg fungerar tillägget genom att bara vifta med musen över typsnittet.

Inte bara det utan tillägget kommer också att identifiera tjänsten som används för att visa ett Pages went-teckensnitt och kommer att stödja Google Font API och Typekit.(Google Font API and Typekit.)

7. LightShot

LightShot är ett verktyg för snabba skärmdumpar som gör att du kan fånga hela eller delar av vilken sida som helst och antingen ladda upp den eller ladda ner den eller skicka den till en tredje parts destination.

Skärmbilder tagna av LightShot kan användas och delas på sociala medier eller skrivas ut.

Du kan kommentera och lägga till text, pilar och mer till den valda delen av skärmen. Men kanske en av de mest briljanta funktionerna i detta enkla verktyg för webbdesigners är att genom att välja en bild kan du sedan fortsätta att göra en fullständig bildsökning på Google efter liknande bilder online .(Google)

LightShot kan konfigureras på flera språk.

Tillägget är skrivet i ren JavaScript och kommer även att fungera för Windows , Chromebook , Linux och Mac OS . Det kan också nås som ett skrivbordsprogram(desktop application) vilket gör det till ett utmärkt val för webbdesigners som är beroende av flera enheter.

8. Fantastisk skärmdump

Liksom Lightshot är Awesome Screenshot en skärm- och bildfångande förlängning.

Det skiljer sig dock från Lightshot på ett antal sätt. Awesome Screenshot kan konfigureras för att ansluta alla dina skärmdumpar till din Google Drive.

Det låter dig skärmdumpa de element som ligger utanför din vy för att fånga hela sidan. Den har ytterligare redigerings- och anteckningsverktyg. komma tillåter beskärning och bildredigering allt inom tillägget.. eller med användning av ytterligare Awesome Screenshot-applikationer

Du kan utöka funktionerna genom att installera Chrome -appen för skrivbordet också. Tillägget tillåter också videoinspelning och delning så att du kan samarbeta med andra utvecklare eller designers när du arbetar på vilken webbplats som helst.

Du kan lägga till ytterligare bilder till en skärmdump såväl som blå eller radera element som du helst inte vill visa för andra.

9. Rensa cache

Chrome-tillägget Clear Cache(Cache Chrome Extension) är ett snabbt och enkelt verktyg som gör att du kan rensa cookies och cacheminne för sidan du tittar på. Det tar bort behovet av att navigera till inställningssidan i din webbläsare för att rensa några enkla sidelement.

För webbdesigners som gör flera redigeringar och vill se dem i realtid är detta ett utmärkt verktyg som kommer att eliminera mycket av frustrationen med att titta på gamla data.

Det finns tillfällen du behöver rensa din cache och dina cookies, men det är tråkigt att navigera till Chrome -inställningarna. Rensa cache låter dig radera din cache såväl som globala eller lokala cookies genom att klicka på en knapp.

Rensa cache låter dig konfigurera vilka element du vill rensa från sidan. Variabler(Variables) inkluderar Cash , nedladdningar, alla system, formulärdata, at Cash , indexdatabas, plugin-data, lösenord och mer.

10. Webbutvecklare Google Chrome Extension

Google Chrome- tillägget för webbutvecklare(Web Developer Google Chrome Extension) gör att utvecklare och designers enkelt kan granska, analysera och kontrollera sina webbsidor för eventuella brott mot design, kodning, användbarhet och sökmotoroptimering.

Det är ett fantastiskt allt-i-ett-verktyg som inte är tungt att bläddra i våra resurser men ändå tillhandahåller massor av information användbar för webbdesign som också ansvarar för sökmotoroptimeringselement på en webbplats eller sida.

 Tillägget installerar verktygsfältet med flera webbutvecklarverktyg.

Verktyget ger dig indikationer på sidstorlek, bredd och dimensioner som står i konflikt med bästa praxis på flera enheter. Det låter dig kontrollera inbäddad JavaScript och se din webbplats genom en simulering av olika enheter.

Tillägget fungerar bra på Windows , Linux och Mac OS . Förutom kodnings- och designproblem kommer det också att ge insikter i metatagginformation, svarsrubriker, färginformation och topografisk information.

Du kan granska verktygets huvudfunktioner och dess fulla funktioner på utvecklaren Chris Pedericks webbplats(Chris Pedericks’ website) .

Utan tvekan finns det en uppsjö av andra högkvalitativa och användbara Chrome -tillägg som webbdesigner eller utvecklare kan använda.

Den här listan visar några av de mest populära och användbara verktygen. Har du några rekommendationer för verktyg som du tror jag är mer användbara eller överlägsna de i den här listan? Låt oss veta.



Kerstin Björklund

About the author

Hej potentiella arbetsgivare! Jag är en mycket erfaren mjukvaruingenjör med över 7 års erfarenhet inom området. Jag vet hur man designar och utvecklar Windows 7-applikationer och har ett brett utbud av Coola webbplatser-rekommendationer på min profil. Mina kunskaper och erfarenheter erbjuder mig en utmärkt matchning för alla företag som letar efter en talangfull person med goda projektledningsförmåga, programmeringskunskaper och erfarenhet av webbutveckling.


Related posts