Spar tid og klikk i Responsive Web Design utvikling

Browser-sync

Illustrasjon: Frank Gjertsen

Å jobbe med mange nettlesere og enheter åpne på en gang kan være tidkrevende og repeterende, men det er heldigvis lys i tunnelen.

I gode gamle dager hadde vi stort sett bare eldre versjoner av Internet Explorer som vi måtte teste litt ekstra for å sjekke at nettsidene oppførte seg riktig. I dag er saken en helt annen, og når vi jobber med RWD trenger vi ofte å sjekke flere nettlesere på ulike enheter som telefoner og nettbrett. Å jobbe med mange nettlesere og enheter åpne på en gang kan være tidkrevende og repeterende, men det er heldigvis lys i tunnellen.

Flere nye verktøy har sett dagens lys, og funksjonaliteten har variert noe mellom de jeg har testet. Et av de bedre verktøyene jeg har prøvd heter Browser-sync. Noen av funksjonene browser-sync har er:

  • Scroll - Den scroller på alle tilkoblede enheter samtidig
  • Linker - Den følger linker på tilkoblede enheter
  • Skjema - Den fyller ut skjema på alle tilkoblede enheter
  • Auto updater - Ser etter endringer i filer og oppdaterer nettleseren med nye endringer
  • OpenSource - Sist men ikke minst er Browser-sync open source

I tillegg kommer browser-sync med en innebygd server, men den kan også fjernes hvis du allerede kjører en lokal server som f.eks. MAMP, AMPPS eller Jekyll (som jeg ofte bruker til prototyping).

Installasjon

For å komme i gang må du først ha nodejs installert. Dette gjør du enkelt på http://nodejs.org/, eller via http://brew.sh/ (osx). Hot tip: Unngå å installere npm pakker med sudo kommando. 

Dersom nodejs er installert skriver du følgende i kommandolinjen (terminal)

npm install -g browser-sync

Alternative oppsett

Statiske filer

  1. Gå til roten av prosjektet via terminalen. `cd ~/Sites/prosjektnavn`. (Det må være en index.html fil der for at det skal virke.)
  2. Skriv følgende i kommandolinjen:

    browser-sync —server

Et nytt nettleser-vindu blir automatisk åpnet med prosjektets index.html fil. Nå er det bare å kopiere url’n fra nettleseren og lime den inn i andre nettlesere på maskinen. Når scroller, navigerer eller fyller ut skjema elementer i en av nettleserene, vil det samme skje i de andre nettleserene.

Hvis du i tillegg har en telefon eller nettbrett tilkoblet samme trådløse nettverk, skal du kunne skrive inne samme url der også. Husk å få med porten etter url’n.

Automatisk oppdatere filer

Det er også mulig å sette browser-sync opp slik at den følger med på endringer i filer og oppdaterer nettleserene som er koblet til automatisk. Hvis du f.eks. vil følge med på alle css og html filer, legger du til

—files "**/*.css, **/*.html"
I sin helhet blir kommandoen da:

browser-sync —server —files "**/*.css, **/*.html"

Ekstern server

Hvis du allerede har en lokal server kjørende, kan du bruke browser-sync uten den innebyggede serveren. Jeg bruker ofte Jekyll når jeg prototyper, og den kjører egen server på localhost:4000.  

  1. Start jekyll server, eller hvilken som helst annen lokal server.
  2. Kopier url fra lokal server og legg den til når du starter browser-sync (terminal).
  3. Et nytt nettleser-vindu åpner seg. Kopiere url’n fra dette vinduet inn i flere nettlesere og håndholdte enheter på samme måte som tidligere.

Automatisk uppdatering av filer har ikke fungert like optimalt for meg når jeg kjører via Jekyll og bruker Sass for å kompilere CSS. Men etter en endring i CSS eller HTML trenger jeg bare å refreshe én nettleser, og de andre følger magisk etter.

Flere muligheter

Browser-sync kan også settes opp som grunt-task og være en del av et større build oppsett. Skulle det være interesse for det kan jeg skrive mer om det i et senere innlegg.

Frank Gjertsen

Frank Gjertsen

Les flere artikler fra Frank Gjertsen.

Jobber i Frontkom. Frontendutvikler og designer. Spesielt ansvar for universell utforming.