I gave Shane Osbourne’s browser-synchronising testing tool a go and wasn’t disappointed. I had taken a sneak peek at his css-tricks blogpost and had put his github repo in my to-be-tested list.
No disappointment, as i was saying, since the tool does exactly what it says on the tin: scrolls, forms, links, css injecting, live reload and more.
Install it by running:
(sudo) npm install -g browser-sync
go to your dev folder, and run:
browser-sync --files "app/css/*.css, app/*.html"
The terminal will gently ask you to copy and paste a couple of scripts at the bottom of your web page, just before the body-closing tag.
<script src='http://192.168.0.15:3000/socket.io/socket.io.js'></script> <script src='http://192.168.0.15:3001/browser-sync-client.min.js'></script>
Once those scripts pasted in, and your local server fired up on your browsers, the terminal will state what browsers are connected.
Browser Connected! (Chrome, version: 31.0.1650.63) Browser Connected! (Firefox, version: 25.0)
Off you go, develop away, then scroll, click, and fill in forms. Everything is in sync.
Note: If you are just using HTML files, you can use the static file built-in server instead of the snippets. Take a closer look at Shane’s detailed repo to know the ins and outs of this great tool.
Most Recent Posts
Special Recent Posts
July 7th, 2014
I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]
June 9th, 2014
We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]