by Flo Preynat

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.
Brilliant.

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.

Give this man some love.
Shane Osbourne on Twitter.
Browser-sync on Github.

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Most Recent Posts

Special Recent Posts

Sip: a color picker refreshingly simple indeed

Sip: a color picker refreshingly simple indeed

July 10th, 2014

I've just discovered Sip, a color picker app for Mac users. "Just discovered" since it's been around[...]

Perch – the CMS that does not pollute your web design workflow

Perch - the CMS that does not pollute your web design workflow

July 7th, 2014

I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]

Responsive video code snippet

Responsive video code snippet

June 29th, 2014

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I[...]

Project Naphta: a nifty extension to play with text embedded in images

Project Naphta: a nifty extension to play with text embedded in images

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'[...]

Free photos for your web design projects

Free photos for your web design projects

June 4th, 2014

Nothing beats using a real professional photographer when working on a cool project. You can be the[...]

Comments

  1. Jitendra says:

    I wish if it could work with Rails app