Share
Recent, pe Webdesigntuts +, ne-am uitat la fluxul de lucru mai rapid HTML / CSS cu ajutorul instrumentelor de dezvoltare Chrome, iar în sfatul rapid de astăzi vom fi înființate cu un plugin gratuit menționat în acest tutorial foarte. Promit această voință Serios accelerați fluxul de lucru - sunteți gata să începeți?
Astăzi vom trece prin setup-ul complet al DevTools Autosave, dar înainte de a începe, să aruncăm o privire la ceea ce face exact această extensie Google Chrome.
Totul este bine și bine înțepenind un antet cu câțiva pixeli în Instrumentele de dezvoltare Chrome, revenind la editorul dvs. de text, actualizând CSS, salvând fișierul și revenind la browser pentru o reîmprospătare rapidă pentru a vă asigura că totul arată minunat. Dar dacă sunteți ceva de genul meu, veți găsi adesea contul de mai multe declarații pentru mai mulți selectori în Instrumentele pentru dezvoltatori, numai pentru a vă întoarce la foaia de stiluri după ce ați pierdut evidența exactă a regulilor necesare care se schimbă.
După cum sugerează și numele, DevTools Autosave actualizează automat foaia dvs. de stil cu toate modificările pe care le faceți în Instrumentele de dezvoltator Chrome în zbor - și dacă utilizați Instrumente de dezvoltator în mare măsură, acest lucru poate accelera dramatic dezvoltarea site-ului. Desigur, puteți să vă întoarceți la editorul de text și să actualizați foaia de stil ca pe normală, făcând acest lucru un plus puternic și flexibil în fluxul de lucru.
Oh, și apropo, această extensie nu este doar pentru CSS și HTML ... DevTools Autosave are JavaScript acoperit, de asemenea!
Înainte de a începe, să examinăm rapid modul în care DevTools Autosave poate fi diferit de alte extensii Chrome pe care le-ați folosit înainte.
În mod normal, instalarea unei extensii Chrome este la fel de simplă ca și accesarea Magazinului web Chrome și dând clic pe butonul "Adăugați la Chrome". DevTools Autosave este un pic diferit în modul în care extensia se bazează pe un server instalat local (în acest caz Node.js) pentru a comunica modificările făcute în Chrome înapoi la fișierele locale CSS, HTML și JS.
Pentru a realiza toate acestea, trebuie să folosim Promptul de comandă (sau fereastra Terminal). Dacă nu ați folosit niciodată comanda de comandă înainte, nu este nimic de ce să vă speriați - este ușor de folosit și vă voi face să parcurgeți fiecare pas.
Pentru început, mergeți direct la Magazinul web Chrome și instalați extensia.
După ce selectați pentru a adăuga extensia în Chrome, vi se va solicita să confirmați acțiunea. Odată instalat, o notificare va apărea în partea din dreapta sus a ferestrei browserului dvs. pentru a vă anunța că extensia este blocată, încărcată și difuzată după cum este necesar în spatele scenei.
Următorul pas este să vă îndreptați spre Node.js pentru a descărca și instala cea mai recentă versiune (la momentul scrisului v0.8.16).
Despachetați și instalați în locația preferată.
Notă: Node.js în sine este un mediu de dezvoltare incredibil de puternic și utilizarea sa este cu mult peste sfera de aplicare a acestui sfat rapid. Dacă sunteți interesat să aflați mai multe despre Node.js, verificați Node.js pentru începători peste la Nettuts+.
Acum, că avem toată infrastructura necesară pentru a executa funcția Autosave DevTools, următorul pas este să executați Node.js prin intermediul promptului de comandă.
Dacă utilizați Windows ca mine, apăsați butonul Start, tastați 'Command Prompt' în câmpul de căutare și selectați 'Node.js Command Prompt'.
Alternativ, dacă utilizați un Mac, navigați la folderul Aplicații → Utilitare → Terminal.app
La prompt, executați următoarea comandă: npm install -g salvare automată
Veți vedea acum chat-ul terminat departe pentru câteva momente:
Notă: În cazul în care contul dvs. de utilizator nu are permisiuni de administrator, este posibil să fie necesar să îl adăugați sudo comanda pentru a instala lucruri: sudo npm install -g salvare automată
După finalizare, puteți rula funcția de salvare automată DevTools.
Ultimul pas este de a rula Extensia în sine. Rulați următoarea comandă la prompt: salvare automata
Veți primi acum o confirmare a faptului că DevTools Autosave rulează local, după cum urmează:
Și cu acești câțiva pași rapizi, ești pregătit și pregătit să pleci.
Frumusețea DevTools Autosave (și de ce o prefer cu unele aplicații similare) este că, odată ce rulează prin serverul node.js, totul altceva lucrări. Nu este nevoie să îndreptați extensia către directoarele locale (cu excepția cazului în care rulați printr-un server local, cum ar fi WAMP sau MAMP), și nu există nimic care să devină "activ" în sine. Doresc să declanșezi editorul de text al opțiunii, să încarci un fișier .css sau .js și să ajustezi conținutul inimii tale în Instrumentele de dezvoltare Chrome, cu toate modificările salvate.
Aplicația DevTools Autosave a devenit o extensie indespensibilă pentru browserul meu preferat și sunt sigur că veți fi de acord!
Veți utiliza DevTools Autosave? Preferi altceva? Dacă da, asigurați-vă că lăsați un comentariu mai jos.
Accentsconagua