Share
Nyligen på Webdesigntuts + vi tittade på Snabbare HTML / CSS Workflow med Chrome Developer Tools, och i dagens Quick Tip får vi dig att installera med ett gratis plugin som nämns i den väldiga handledningen. Jag lovar den här viljan allvarligt påskynda ditt arbetsflöde - redo att komma igång?
Idag ska vi gå igenom den fullständiga installationen av DevTools Autosave, men innan vi börjar kommer vi ta en titt på vad exakt den här fina Google Chrome-tillägget gör.
Det är allt bra och bra att nudga en rubrik runt några pixlar i Chrome Developer Tools, återvända till din textredigerare, uppdatera CSS, spara filen och återvända till webbläsaren för en snabb uppdatering för att se till att allt ser bra ut. Men om du är något som jag, kommer du ofta att hitta dig själv att tweak flera deklarationer för flera väljare i utvecklarverktygen, bara för att återvända till ditt stylesheet som har förlorat exakt vilka regler som behövs för att ändra.
Som namnet antyder uppdaterar DevTools Autosave automatiskt ditt stilark med alla ändringar som du gör i Chrome Developer Tools på flyg - och om du använder Developer Tools kraftigt kan detta dramatiskt påskynda webbplatsutveckling. Naturligtvis kan du också återgå till din textredigerare och uppdatera ditt stilark enligt normalt, vilket gör det till ett kraftfullt och flexibelt tillägg till ditt arbetsflöde..
Åh, och förresten, är denna förlängning inte bara för CSS och HTML ... DevTools Autosave har JavaScript också täckt!
Innan vi börjar, låt oss snabbt titta på hur DevTools Autosave kan skilja sig från andra Chrome-tillägg som du kanske har använt tidigare.
Normalt är installationen av en Chrome-förlängning lika enkel som att gå till Chrome Web Store och klicka på knappen "Lägg till i Chrome". DevTools Autosave är lite annorlunda på sättet att förlängningen bygger på en lokalt installerad server (i detta fall Node.js) för att kommunicera ändringarna som gjorts i Chrome tillbaka till dina lokala CSS-, HTML- och JS-filer.
För att uppnå allt detta behöver vi använda kommandotolken (eller terminalfönstret). Om du aldrig har använt kommandotolken innan, är det inget att vara rädd för - det är dött lätt att använda, och jag går dig igenom varje steg.
Till att börja med, gå vidare till Chrome Web Store och installera tillägget.
När du har valt att lägga till tillägget till Chrome, blir du ombedd att bekräfta åtgärden. När en gång har installerats visas en anmälan högst upp till höger i ditt webbläsarfönster för att meddela att utbyggnaden är låst, laddad och köra efter behov bakom kulisserna.
Nästa steg är att gå vidare till Node.js för att ladda ner och installera den senaste versionen (vid skrivningstid v0.8.16).
Packa upp och installera till din önskade plats.
Notera: Node.js själv är en oerhört kraftfull utvecklingsmiljö och användningen ligger långt ifrån denna snabba tips. Om du är intresserad av att lära dig mer om Node.js, kolla Node.js för nybörjare över på Nettuts+.
Nu när vi har all infrastruktur som krävs för att köra DevTools Autosave, är nästa steg att köra Node.js genom kommandotolken.
Om du använder Windows som jag, tryck på Start-knappen, skriv "Kommandotolk" i sökfältet och välj "Node.js Command Prompt".
Alternativt, Om du använder en Mac, navigerar du till din programmapp → Verktyg → Terminal.app
Kör följande kommando när du frågar: npm installera -g autosave
Du kommer nu att se terminalen chatta bort för några ögonblick:
Notera: Om ditt användarkonto inte har administratörsbehörigheter kan du behöva lägga till sudo kommando för att installera saker: sudo npm installera -g autosave
När du är klar kan du köra DevTools Autosave.
Det sista steget är att köra förlängningen själv. Kör följande kommando vid prompten: Automatisk sparning
Du får nu en bekräftelse på att DevTools Autosave körs lokalt, enligt följande:
Och med de få snabba stegen är du redo och redo att gå.
Skönheten i DevTools Autosave (och varför jag föredrar det till några liknande appar) är att när den körs via node.js-servern, allt annat bara Arbetar. Det finns ingen anledning att peka ut förlängningen till lokala kataloger (såvida du inte kör via en lokal server som WAMP eller MAMP), och det finns inget att slå på. Bara skjuta upp din textredigerare, ladda upp en .css eller .js-fil och tweak till ditt hjärta innehåll i Chrome Developer Tools med alla ändringar sparade.
DevTools Autosave har blivit en obetydlig förlängning till min favorit webbläsare, och jag är säker på att du håller med om det!
Kommer du använda DevTools Autosave? Föredrar du något annat? Om så är fallet, var noga med att lämna en kommentar nedan.
Accentsconagua