Share
Nylig på Webdesigntuts + vi så på Faster HTML / CSS Workflow med Chrome Developer Tools, og i dagens Quick Tip får vi deg opprettet med et gratis plugin som er nevnt i den svært opplæringen. Jeg lover denne viljen alvor Fremskynde arbeidsflyten din - klar til å komme i gang?
I dag skal vi gå gjennom det komplette oppsettet for DevTools Autosave, men før vi kommer i gang, la oss ta en titt på hva denne nifty Google Chrome-utvidelsen gjør.
Det er alt godt og godt å knuse en topptekst rundt noen få piksler i Chrome Developer Tools, tilbake til tekstredigeringsprogrammet, oppdatering av CSS, lagring av filen og retur tilbake til nettleseren for en rask oppdatering for å sikre at alt ser bra ut. Men hvis du er noe som meg, vil du ofte finne deg selv til å justere flere erklæringer for flere valgmuligheter i utviklerverktøyene, bare for å gå tilbake til stilarket ditt og ha mistet nøyaktig hvilke regler som trengs for å skifte.
Som navnet antyder, oppdaterer DevTools Autosave automatisk stilarket ditt med alle endringene du gjør i Chrome Developer Tools i fly - og hvis du bruker utviklingsverktøy tungt, kan dette dramatisk øke hastigheten på nettstedutviklingen. Selvfølgelig kan du også gå tilbake til teksteditoren og oppdatere stilarket ditt som normalt, noe som gjør dette til et kraftig og fleksibelt tillegg til arbeidsflyten din..
Å, og forresten, er denne utvidelsen ikke bare for CSS og HTML ... DevTools Autosave har JavaScript dekket også!
Før vi begynner, la oss raskt se på hvordan DevTools Autosave kan være forskjellig fra andre Chrome-utvidelser som du kanskje har brukt før.
Normalt er det å installere en Chrome-utvidelse like enkelt som å gå til Chrome Nettmarked og klikke på «Legg til i Chrome» -knappen. DevTools Autosave er litt annerledes på grunn av at utvidelsen er avhengig av en lokalt installert server (i dette tilfellet Node.js) for å kommunisere endringene som er gjort i Chrome, tilbake til de lokale CSS-, HTML- og JS-filene dine.
For å oppnå alt dette, må vi bruke kommandoprompt (eller Terminal-vinduet). Hvis du aldri har brukt kommandoprompen før, er det ingenting å være redd for - det er dødt lett å bruke, og jeg går deg gjennom hvert trinn.
Til å begynne med, gå videre til Chrome Nettmarked og installer utvidelsen.
Når du velger å legge til utvidelsen til Chrome, blir du bedt om å bekrefte handlingen. Når det er installert, vises et varsel øverst til høyre i nettleservinduet for å fortelle deg at utvidelsen er låst, lastet og kjørt etter behov bak kulissene.
Det neste trinnet er å gå over til Node.js for å laste ned og installere den nyeste versjonen (på tidspunktet for skriving v0.8.16).
Pak deg ut og installer til ønsket sted.
Merk: Node.js selv er et utrolig kraftig utviklingsmiljø, og bruken er langt utenfor omfanget av dette raske tipset. Hvis du er interessert i å lære mer om Node.js, sjekk ut Node.js for Beginners over på Nettuts+.
Nå som vi har all infrastrukturen som kreves for å kjøre DevTools Autosave, er neste trinn å kjøre Node.js gjennom ledeteksten.
Hvis du bruker Windows som meg, klikker du Start-knappen, skriver "Kommandoprompt" i søkefeltet og velger "Node.js Command Prompt".
Alternativt, Hvis du bruker en Mac, navigerer du til programmappen → Verktøy → Terminal.app
Kjør følgende kommando ved spørringen: npm installer -g autosave
Du vil nå se terminalen snakke unna for et øyeblikk:
Merk: Hvis brukerkontoen din ikke har administratorrettigheter, må du kanskje legge til sudo kommando for å installere ting: sudo npm installer -g autosave
Når du er ferdig, kan du kjøre DevTools Autosave.
Det siste trinnet er å kjøre utvidelsen selv. Kjør følgende kommando ved spørringen: autolagring
Du får nå en bekreftelse på at DevTools Autosave kjører lokalt, som følger:
Og med de få raske trinnene, er du klar og klar til å gå.
Skjønnheten til DevTools Autosave (og hvorfor jeg foretrekker det til noen lignende apps) er at når det kjører gjennom node.js-serveren, alt annet bare virker. Det er ikke nødvendig å peke utvidelsen til lokale kataloger (med mindre du kjører gjennom en lokal server som WAMP eller MAMP), og det er ingenting å slå på. Bare brann opp tekstredigeringsprogrammet ditt, last opp en .css eller .js-fil og tweak til ditt hjerte innhold i Chrome Developer Tools med alle endringene lagret.
DevTools Autosave har blitt en uoppnåelig utvidelse til min favoritt nettleser, og jeg er sikker på at du er enig!
Vil du bruke DevTools Autosave? Foretrekker du noe annet? Hvis så, vær sikker på å legge igjen en kommentar nedenfor.
Accentsconagua