Share
Recentemente su Webdesigntuts + abbiamo esaminato il flusso di lavoro HTML / CSS più veloce con gli strumenti per sviluppatori di Chrome e, nella versione di oggi, ti forniremo un plug-in gratuito menzionato in questo tutorial. Lo prometto sul serio velocizza il tuo flusso di lavoro, pronto per iniziare?
Oggi passeremo attraverso la configurazione completa di DevTools Autosave, ma prima di iniziare, diamo un'occhiata a cosa fa esattamente questa bella estensione di Google Chrome.
È tutto a posto e basta dare un colpo di testa a pochi pixel in Strumenti per sviluppatori di Chrome, tornare al tuo editor di testo, aggiornare il CSS, salvare il file e tornare al browser per un rapido aggiornamento per assicurarti che tutto funzioni alla grande. Ma se sei come me, spesso ti ritrovi a modificare più dichiarazioni per più selettori negli Strumenti per sviluppatori, solo per tornare al foglio di stile dopo aver perso esattamente le regole necessarie per cambiare.
Come suggerisce il nome, DevTools Autosave aggiorna automaticamente il tuo foglio di stile con tutte le modifiche apportate in Chrome Developer Tools in tempo reale e, se utilizzi gli Strumenti per sviluppatori, può accelerare notevolmente lo sviluppo del sito. Ovviamente puoi anche tornare al tuo editor di testo e aggiornare il tuo foglio di stile come di consueto, rendendo questa aggiunta potente e flessibile al tuo flusso di lavoro.
Oh, e, a proposito, questa estensione non è solo per CSS e HTML ... DevTools Autosave ha anche coperto JavaScript!
Prima di iniziare, diamo una rapida occhiata a come DevTools Autosave potrebbe essere diverso dalle altre estensioni di Chrome che potresti aver usato prima.
Normalmente, installare un'estensione di Chrome è semplice come andare al Chrome Web Store e fare clic sul pulsante "Aggiungi a Chrome". DevTools Autosave è un po 'diverso nel modo in cui l'estensione si basa su un server installato localmente (in questo caso Node.js) per comunicare le modifiche apportate in Chrome ai tuoi file CSS, HTML e JS locali.
Per realizzare tutto questo, dobbiamo usare il prompt dei comandi (o la finestra del terminale). Se non hai mai utilizzato il prompt dei comandi in precedenza, non c'è nulla di cui aver paura, è facile da usare e ti guiderò passo dopo passo.
Per iniziare, vai al Chrome Web Store e installa l'estensione.
Dopo aver selezionato di aggiungere l'estensione a Chrome, ti verrà chiesto di confermare l'azione. Una volta installato, verrà visualizzata una notifica in alto a destra nella finestra del browser per informarti che l'estensione è bloccata, caricata e in esecuzione come richiesto dietro le quinte.
Il prossimo passo è andare su Node.js per scaricare e installare l'ultima versione (al momento di scrivere v0.8.16).
Disimballare e installare nella posizione preferita.
Nota: Node.js stesso è un ambiente di sviluppo incredibilmente potente e il suo utilizzo va ben oltre lo scopo di questo suggerimento rapido. Se sei interessato a saperne di più su Node.js, dai un'occhiata a Node.js per principianti su Nettuts+.
Ora che disponiamo di tutta l'infrastruttura necessaria per eseguire DevSools Autosave, il passo successivo è eseguire Node.js attraverso il prompt dei comandi.
Se utilizzi Windows come me, premi il pulsante Start, digita "Prompt dei comandi" nel campo di ricerca e seleziona "Prompt dei comandi Node.js".
In alternativa, se utilizzi un Mac, accedi alla cartella Applicazioni → Utility → Terminal.app
Al prompt, eseguire il seguente comando: npm install -g autosave
Ora vedrai il terminale chiacchierare per qualche istante:
Nota: Se il tuo account utente non ha permessi di amministratore, potrebbe essere necessario aggiungere il sudo comando per installare le cose: sudo npm install -g autosave
Una volta completato, è possibile eseguire Autosave DevTools.
Il passaggio finale è eseguire l'estensione stessa. Eseguire il seguente comando al prompt: autosave
Ora riceverai una conferma che DevTools Autosave è in esecuzione in locale, come segue:
E con quei pochi passi veloci, sei pronto e pronto per partire.
La bellezza di DevTools Autosave (e il motivo per cui preferisco ad alcune app simili) è che una volta eseguito attraverso il server node.js, tutto il resto solo lavori. Non è necessario puntare l'estensione alle directory locali (a meno che non si stia utilizzando un server locale come WAMP o MAMP), e non c'è nulla da attivare 'di per sé'. Attiva il tuo editor di testo preferito, carica un file .css o .js e ottimizza i contenuti del tuo cuore in Strumenti per sviluppatori di Chrome con tutte le modifiche salvate.
DevTools Autosave è diventato un'estensione indissociabile del mio browser preferito, e sono sicuro che sarete d'accordo!
Utilizzerai DevTools Autosave? Preferisci qualcos'altro? Se è così, assicurati di lasciare un commento qui sotto.
Accentsconagua