Share
Onlangs hebben we in Webdesigntuts + gekeken naar een snellere HTML / CSS-workflow met Chrome-ontwikkelaarstools en in de snelle tip van vandaag zullen we je instellen met een gratis plug-in die in die zelfstudie wordt genoemd. Ik beloof dit ernstig bespoedig uw workflow - klaar om te beginnen?
Vandaag lopen we door de complete installatie van DevTools Autosave, maar voordat we aan de slag gaan, laten we eens kijken naar wat deze handige Google Chrome-extensie doet.
Het is allemaal goed en wel dat een kop in een paar pixels in de ontwikkelaarstools van Chrome wordt gepusht, terugkeert naar je teksteditor, de CSS bijwerkt, het bestand opslaat en terugkeert naar de browser voor een snelle verversing om te zorgen dat alles er goed uitziet. Maar als u op mij lijkt, zult u vaak meerdere verklaringen voor meerdere selectors tweaken in de Developer Tools, om vervolgens terug te keren naar uw stylesheet omdat u niet meer weet welke regels moeten worden gewijzigd.
Zoals de naam al doet vermoeden, werkt DevTools Autosave uw stylesheet automatisch bij met alle wijzigingen die u in de ontwikkelaarstools van Chrome onmiddelijk aanbrengt - en als u Developer Tools zwaar gebruikt, kan dit de ontwikkeling van de site drastisch versnellen. Natuurlijk kunt u ook terugkeren naar uw teksteditor en uw stylesheet bijwerken zoals normaal, waardoor dit een krachtige en flexibele aanvulling is op uw workflow.
Oh, en trouwens, deze extensie is niet alleen voor CSS en HTML ... DevTools Autosave heeft JavaScript ook gedekt!
Voordat we aan de slag gaan, laten we snel even kijken hoe DevTools Autosave anders kan zijn dan andere Chrome-extensies die je eerder hebt gebruikt.
Normaal gesproken is het installeren van een Chrome-extensie net zo eenvoudig als naar de Chrome Web Store gaan en op de knop 'Toevoegen aan Chrome' klikken. DevTools Autosave is een beetje anders in de manier waarop de extensie afhankelijk is van een lokaal geïnstalleerde server (in dit geval Node.js) om de wijzigingen die in Chrome zijn aangebracht terug te communiceren naar uw lokale CSS-, HTML- en JS-bestanden.
Om dit allemaal te bereiken, moeten we de opdrachtprompt (of terminalvenster) gebruiken. Als je nog nooit eerder de opdrachtprompt hebt gebruikt, is dit niets om bang voor te zijn - het is doodeenvoudig in gebruik en ik zal je stap voor stap begeleiden.
Ga om te beginnen naar de Chrome Web Store en installeer de extensie.
Nadat u ervoor heeft gekozen om de extensie toe te voegen aan Chrome, wordt u gevraagd om de actie te bevestigen. Na installatie verschijnt er een melding rechtsboven in uw browservenster om u te laten weten dat de extensie achter de schermen is vergrendeld, geladen en uitgevoerd zoals vereist.
De volgende stap is om naar Node.js te gaan om de nieuwste release te downloaden en te installeren (op het moment van schrijven v0.8.16).
Uitpakken en installeren naar uw gewenste locatie.
Notitie: Node.js zelf is een ongelooflijk krachtige ontwikkelomgeving en het gebruik ervan ligt ver buiten het bereik van deze snelle tip. Als je meer wilt weten over Node.js, ga dan naar Node.js voor beginners in Nettuts+.
Nu we alle benodigde infrastructuur hebben om DevTools Autosave uit te voeren, is de volgende stap om Node.js via de opdrachtprompt uit te voeren.
Als u Windows zoals ik gebruikt, klikt u op de Start-knop, typt u 'Opdrachtprompt' in het zoekveld en selecteert u 'Node.js opdrachtprompt'.
Als alternatief, Als u een Mac gebruikt, navigeert u naar de map Toepassingen → Hulpprogramma's → Terminal.app
Voer de volgende opdracht uit bij de prompt: npm install -g autosave
Je ziet het terminale gebabbel nu een paar ogenblikken weglopen:
Notitie: Als uw gebruikersaccount geen beheerdersrechten heeft, moet u wellicht het sudo commando om dingen te installeren: sudo npm install -g autosave
Eenmaal voltooid, kunt u DevTools Autosave uitvoeren.
De laatste stap is om de extensie zelf uit te voeren. Voer de volgende opdracht uit bij de prompt: autosave
U ontvangt nu een bevestiging dat DevTools Autosave lokaal wordt uitgevoerd, als volgt:
En met die paar snelle stappen, bent u klaar en klaar om te beginnen.
De schoonheid van DevTools Autosave (en waarom ik het verkies boven sommige vergelijkbare apps) is dat als het eenmaal door de node.js-server loopt, al het andere gewoon werken. Het is niet nodig om de extensie naar lokale directory's te verwijzen (tenzij u een lokale server zoals WAMP of MAMP doorloopt) en er is niets dat u op zichzelf kunt inschakelen. Vouw gewoon uw gewenste teksteditor op, laad een .css- of .js-bestand en pas de inhoud van uw hart aan in Chrome Developer Tools met alle opgeslagen wijzigingen.
DevTools Autosave is een onmisbare uitbreiding van mijn favoriete browser geworden, en ik ben er zeker van dat u hiermee akkoord gaat!
Gebruik je DevTools Autosave? Heb je liever iets anders? Zo ja, laat dan hieronder een reactie achter.
Accentsconagua