Google Chrome var en ganska latecomer i webbläsarkrigen men var en övergångs framgång som omedelbart blev favorit för både Mac och Windows-användare. Allt om Chrome, från det minimala och mycket praktiska gränssnittet till sin solida Webkit Core och robusta förlängningssystem, gör det till ett av de bästa sätten att komma åt webben.
För alla Chrome-älskare där ute har vi en fantastisk samling av 25 extremt användbara Google Chrome Extensions för designers och utvecklare. Oavsett om du letar efter ett snabbt sätt att validera din sida eller skapa ett anpassat nätöverlägg, har vi verktyget för dig.
Firebug Lite
Firebug Lite ger den rika visuella representationen vi är vana vid i Firebug när det gäller HTML-element, DOM-element och Box Model-skuggning. Det ger några häftiga funktioner som inspekterar HTML elemements med musen och live CSS redigering.
Snygg
Denna förlängning gör det enkelt och roligt att helt omforma visuell stil på en webbsida eller webbplats. Vill du skapa en grå version av YouTube eller en svart version av Google? Snyggt är ditt svar.
Snygg kan du enkelt hantera användarstilar. Lägg till, ta bort, aktivera, inaktivera och organisera med några få musklick, ingen kod att redigera, ingen obskurlig konfiguration att hitta. Snygg sällskapswebbplats, userstyles.org, värd tiotusentals användarstilar gjorda av andra snygga användare som du kan försöka.
CSS Reloader
CSS Reloader är en webbläsareutvidgning som låter dig ladda CSS utan att ladda om sidan själv. Slå bara en snabb genväg och sidan uppdateras med stiländringarna.
Speed Tracer (av Google)
Speed Tracer är ett verktyg som hjälper dig att identifiera och åtgärda prestandaproblem i dina webbapplikationer. Den visualiserar mätvärden som tas från instrumentnivåer på låg nivå i webbläsaren och analyserar dem när din applikation körs. Användargränssnittet är ett lättanvänt instrumentbräde som är fullt av tillämplig information och grafer som hjälper dig att optimera dina appar.
Live CSS Editor
Denna förlängning ger en textruta på vilken HTML-sida som helst så att du kan skriva CSS fritt och omedelbart se resultaten. Det är ett enkelt verktyg, men det är ganska användbart för att utarbeta idéer och felsökning.
Aviary Screen Capture
Detta är ett riktigt snyggt litet verktyg som fångar någon webbsida och öppnar den automatiskt i ett av Aviary.coms många professionella verktyg för annonsmaterial. Du har tillgång till Photoshop-liknande verktyg så att du kan manipulera din bild men du vill: skörda, ändra storlek, rotera etc.
Lorem Ipsum Generator
Bara en enkel Lorem Ipsum-generator byggdes direkt i din webbläsare. Extremt användbart för när du skapar mockups och behöver lite fyllnadstext.
Uppdatera apa
Uppdatera automatiskt en sida med ett visst intervall. Övervaka sidan för en ändring och bli anmäld vid ändringar. Det här är uppenbarligen det perfekta verktyget för webbutvecklare som vill hålla koll på kodändringar i webbläsaren utan att uppdatera sidan på en gång.
Window Resizer
Denna förlängning ändrar webbläsarfönstret för att emulera olika upplösningar. Om du hoppar på det lyhörda webbdesigntåget, vill du kolla in den här förlängningen så att du snabbt kan utvärdera dina mönster i olika populära storlekar.
Google Font Previewer för Chrome
Jag är ett stort fan av Google Fonts, det fria verktyget för att använda anpassade webbfonter via CSS. Denna förlängning låter dig snabbt använda Google-teckensnitt till specifika CSS-väljare så att du kan få en snabb förhandsgranskning av vad det tecknet kommer att se ut i din design innan du faktiskt uppdaterar dina filer.
ruul
ruul - en fantastiskt enkel skärmlinjal för att klä upp och mäta typ, linjehöjd, slag och nästan allt på webben. Perfekt för att analysera befintliga mönster.
Kolla mina länkar
"Kontrollera Mina länkar" hittar snabbt alla länkar på en webbsida och kontrollerar var och en för dig. Det belyser vilka som är giltiga och vilka som är brutna. Jag kan inte berätta hur många gånger jag har gjort dumma misstag som att glömma att kolla mina länkar för att se till att de alla fungerar. Detta enkla verktyg automatiserar denna irriterande process och hjälper dig att identifiera vad du behöver fixa.
Comps
Om du gillar att koda webbplatser från Photoshop comps hittar du dig själv ständigt jämföra de två för att se om du är på rätt spår. Denna förlängning gör att du kan ladda bilder från din lokala dator och enkelt överföra dem till din webbplats för att jämföra din kod mot en viss design.
Gridsna
Denna förlängning hjälper dig att skapa ett anpassat rutnätöverlag för en sida. Det har en hel del alternativ och är ganska användbar för att skapa pixel perfekt nätbaserade layouter.
Gråskale
Med denna förlängning kan du få dina sidor att visas i gråskala, så att du kan se potentiella problem med att färgerna inte har tillräckligt med kontrast. Kontrast är ett viktigt element i design som förbättrar estetik och användbarhet för både typiska och colorblind användare.
Linjaler, guider, ögondropper och färgväljare
För UI-utvecklare. Välj vilken färg som helst från webbsidan med hjälp av eye-drop-verktyg; visa linjaler, guider och rutnät på sidan.
Pendule
Pendule är en stor samling utvecklingsverktyg för Chrome. Du kan visa och validera kod, inaktivera stilar, visa använda färger, dölja bilder, visa lösenord och mycket mer.
WhatFont
WhatFont är ett fantastiskt verktyg som du kan hitta på många webbläsare. Det är snabbt, enkelt, super attraktivt och berättar inte bara typsnittet men storleken och linjens höjd också.
Palett för Chrome
Ett snyggt litet verktyg som snabbt tar tag i färger från vilken bild som helst och hjälper dig att snabbt bygga fasta färgscheman.
guider
Håll dina element i linje med guider! Kontrollera avstånd, anpassningar och mer för att se till att dina webbplatser är pixel-perfekta.
HTML Instant
HTML Instant är en fin och enkel dubbelruta redigerare som låter dig skriva in HTML, CSS eller JavaScript till höger och direkt se en live förhandsvisning till vänster.
HTML-validering
Ett snabbt och enkelt sätt att validera den aktuella sidan med w3.org.
SEO & Website Analysis
SEO & Website Analysis by WooRank är en förlängning för Google Chrome som ger en djup SEO-analys som täcker mer än 50 SEO och användbarhetskriterier.
Browser Kompatibilitetsdetektor
Kompatibilitet med tv-webbläsare är den största smärtan du kommer att möta när du utvecklar webbplatser. Det här verktyget kan hjälpa dig att snabbt identifiera potentiella problemområden i din kod.
Neo Vision
Neo Vision ger syntaxhöjd när du tittar på källfiler. Den snygga delen är att det finns flera anpassningsbara teman så att du kan få koden att se ut som du vill.
Vad är din favorit Google Chrome Extension?
Nu när du har sett vår samling av Google Chrome Extensions för designers och utvecklare, lämna en kommentar och meddela vad dina favoriter är. Har du också provat någon av tilläggen ovan? Vad tyckte du om dem?