Om du är designer som är i behov av några användbara
verktyg för att påskynda, samarbeta eller revision din web utvecklingsprojekt, Krom
extension har en mängd verktyg.
Denna lista innehåller några av de mest populära och vissa skulle hävda att det är nödvändigt – verktyg och Chrome-tillägg som varje användare att göra design-arbete bör ha i sitt kit väska.
1. DomFlags
DOM Flaggor är en enkel att använda Chrome extension
det erbjuder ett nytt sätt för utvecklare att arbeta med browser verktyg. Det gör det möjligt
utvecklare att påskynda uppgift styling delar.
Använda genvägar på tangentbordet för varje element som du
kan bokmärka din navigering.
Vi har alla upplevt att det är svårt i
inspektera mycket detaljerade delar, och det är lätt att gå vilse.
DOM Flaggor möjligt för dig att spåra inslag styling
innehåller en funktion för att inspektera komponenter med noggrannhet automatiskt. Detta, i
sin tur kommer att hjälpa till att snabba upp DevTools arbetsflöde och genomförande.
DOM Flaggor kan du spåra ändringar. Och
behåll ert fokus på de delar som du arbetar med.
2. Sizzy
Sizzy ger designers och utvecklare i en enkel
sätt att testa sina webbplatser i flera viewport.
Sizzy erbjuder ett enkelt sätt att kontrollera din
design i real-tid. Det erbjuder en interaktiv syn på valfritt antal enheter och
skärmstorlekar. Du kan även simulera en enhet tangentbord och sedan växla mellan
landskapet och lägen stående.
Installera en Chrome-tillägget lägger till en knapp i verktygsfältet, som, när du klickar på för att öppna den aktuella WEBBADRESSEN i Sizzy plattform. Förlängningen kommer att blockera alla “x-frame-val” – rubriker så du kommer att kunna ta en titt på en hemsida på nätet.
Sizzy är ett open source-projekt, och du kan se hela koden här.
3. Checkbot
Checkbot kan testa din webbplats för säkerhet
frågor och även granska din webbplats sidan laddas snabbare. Det kommer att ge
designers med ett medel för att identifiera typiska fel och rekommendera förbättringar
i området säkerhet, sökmotorer och plats hastighet.
Med mer än 50 bästa praxis statistik, det
kommer granska en webbplats för bästa praxis för SEO, trasiga länkar, dubbletter och
mer. Verktyget kommer också att validera CSS, JS, och HTML.
Checkbot plockar upp på designer och kodare fel
i realtid sparar dig besväret med att gå tillbaka och kontrollera ditt arbete
upprepade gånger.
Om du letar efter ett bra verktyg för att
kommer åtgärda brutna länkar, se till unikt innehåll och rubriker och eliminera
omdirigera kedjor detta verktyg skulle vara användbart.
För designers, det kan hjälpa dig att minimera din
CSS-och JS samt ge rekommendationer om hur minify din CSS och
utnyttja browser caching.
4. GistBox Clipper
GistBox är en av de mest användbara Chrome
tillägg för webbdesigners.
GistBox kan skapa en GitHub Kontentan från varje kodblock på en webbsida som du tittar på.
På det övre högra hörnet på valfri kod
block, kommer du att se en liten knapp, som när den trycks, kommer att tillåta en pop-up som
gör det möjligt för dig att spara koden till Kärnan.
Du kan skapa nya Gists med höger musknapp
klicka och spara block av kod för senare inspektion och använda.
Integrera med GitHub gör att designers och
utvecklare att samla in koden block och manipulera dem eller kategorisera dem för
senare användning. Detta gör det till en bekväm och effektiv Chrome extension verktyg.
5. ColorZilla
ColorZilla Är ett otroligt användbart Chrome
förlängning för att samla in hex-koder som kan vara märkt, märkt och kategoriseras
för enskilda web design projekt.
Det gör att du kan välja en pipett verktyget
som kommer att extrahera färg från en webbsida och spara det till ColorZilla
urklipp.
Med det, kan du utveckla snabbt färg
paletter för senare bruk, och som ett sätt att se till att du använder färg
genomgående i webbdesign och utveckling.
ColorZilla fungerar också som en färg analyzer och
CSS gradient editor så att du kan konvertera en bild till CSS.
6. WhatFont
Detta
Chrome-Tillägget är en riktig tidsbesparare för dem som vill utnyttja sin
favorit typsnitt Och införliva dem i
deras egen web design projekt.
WhatFont Chrome-tillägget gör det möjligt för utvecklare att
snabbt analysera och identifiera nästan alla typsnitt på en webbsida.
Förlängningen är väl utvecklad och ganska
än att behöva öppna upp inspektion verktyg förlängningen fungerar genom att bara vinka
för musen över de teckensnitt.
Inte bara det, men i förlängningen också kommer att finna den tjänst som används för att visa upp ett Sidorna gick teckensnitt och kommer att stödja Google Font API och Typekit.
7. LightShot
LightShot är en snabb skärmdump verktyg som
kan du fånga in hela, eller en del av en sida och antingen ladda upp det eller
ladda ner den eller skicka den till en tredje part destination.
Bilder 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
den markerade delen av skärmen. Men kanske en av de mest lysande
funktioner av detta enkla verktyg för webbdesigners är att genom att välja en bild
du kan sedan gå vidare för att göra en fullständig bildsökning på Google för liknande bilder
på nätet.
LightShot kan konfigureras på flera
språk.
Förlängningen är skrivet i ren JavaScript och kommer också att arbeta för Windows, Chromebook, Linux och Mac OS. Det kan också användas som en desktop-applikation som gör det till ett utmärkt val för webbdesigners som är beroende av flera enheter.
8. Awesome Screenshot
Som Lightshot, Awesome Screenshot är en skärm
och bild fånga förlängning.
Det skiljer sig från Lightshot, men i en
antalet sätt. Awesome Screenshot kan konfigureras för att ansluta alla dina
skärmdumpar med din Google drive.
Det gör att du för att ta en skärmdump dessa element
som är bortom din syn för att fånga hela sidan. Det har
ytterligare redigering och tilläggsverktyg kommatecken möjliggör beskärning och bild
redigering alla inom förlängning.. eller med hjälp av ytterligare Awesome
Program skärmdump
Du kan utöka dess funktioner genom att installera
Chrome-appen för skrivbordet också. Förlängningen möjliggör också för video
fånga och dela så att du kan samarbeta med andra utvecklare, eller
designers när du arbetar på en webbplats.
Du kan lägga till flera bilder till en skärmdump
liksom blå eller ta bort delar som du inte vill visa för andra.
9. Rensa Cache
Rensa Cache-tillägg för Chrome Är en snabb och
enkla verktyg som gör att du kan rensa cookies och cache för sidan som du är
att titta på. Det tar bort behovet av att navigera till inställningar i din
webbläsaren för att klara ett par enkla sidelement.
För webbdesigners som gör flera
redigeringar och vill visa dem i realtid, detta är ett utmärkt verktyg som kommer att
eliminera mycket av den frustration som kommer av att titta på gamla uppgifter.
Det finns tider som du behöver för att rensa din cache
och kakor, men att navigera till inställningar i Chrome är jobbigt. Rensa Cache-låter dig
radera cacheminnet samt globala eller lokala cookies på den här knappen klicka här.
Rensa Cache kommer att tillåta dig att konfigurera vilka
element du vill ta bort från sidan. Variabler som ingår Kassa, nedladdningar,
alla system, form-data, i Kontanter, index databasen, plugin-data, lösenord och
mer.
10. Webbutvecklare Google Chrome
Förlängning
Webbutvecklare Google Chrome Extension
gör det möjligt för utvecklare och designers lätt revision, analysera och kontrollera deras webb
sidor för eventuella överträdelser av best practice design, kodning, användbarhet, sök
sökmotoroptimering.
Det är en stor allt-i-ett verktyg som inte är tung
på bläddra våra resurser men ändå ger en massor av användbar information till web design
är också ansvarig för sökmotoroptimering element inom en webbplats eller
sidan.
Den
tillägget installeras verktygsfält med flera web developer tools.
Verktyget kommer att ge dig indikationer på sidan
storlek, bredd och mått som gör konflikt med bästa praxis på
flera enheter. Det kan du kontrollera inbäddad JavaScript och visa ditt
webbplats genom simulering av olika enheter.
Tillägget fungerar på Windows, Linux
och Mac OS. I tillägg till kodning och design frågor, det kommer också att ge
insikter i meta-taggen information, svar rubriker, färg information, och
topografisk information.
Du kan gå igenom de viktigaste funktionerna i verktyget så bra som det är full kapacitet på utvecklaren Chris Pedericks ” hemsida.
Ingen tvekan om att det finns en uppsjö av andra höga
kvalitet och användbara tillägg för Chrome som är webb-designer eller utvecklare kan
användning.
Denna lista visar några av de mest populära
och användbara verktyg. Har du några rekommendationer för verktyg som du tror att jag är
mer användbart eller bättre än de i denna lista? Låt oss veta.