Light Dark
Ahmad Nassri

CTO of npm, Inc. Founder of Tech Masters Community, Member of Node.js Foundation, Advocate of all things Open Source, Startup Advisor, Entrepreneur.

Previously: TELUS, Kong, CBC/Radio-Canada, BlackBerry

Homeblog

Using BrowserSync for Debugging your localhost

With the advent of CSS preprocessors, Live-reloading tools, the continuous evolution of JavaScript, and multi-screen development, better & smarter tools have also emerged to facilitate testing, debugging and compiling.

Throughout the years, there has been many ways in which you ran a local web development environment, and the longest time Apache HTTP Server was at the core of it all, whether you ran it natively, or using one of the many tools to manage its complex configurations.

Many other HTTP Server alternatives to Apache has surfaced since those early years, most noteably lighttpd & NGINX.

Nowadays, almost every programming langauge comes with it’s own Built-in HTTP server and supporting libraries which are sufficient enough for running and debugging code without relying on a standalone HTTP Server. Even PHP got one!

However, with the advent of CSS preprocessors, Live-reloading tools, the continuous evolution of JavaScript, and multi-screen development, better & smarter tools have also emerged to facilitate testing, debugging and compiling.

In today’s world of web development, it’s simply not enough to just run an HTTP Server for testing & debugging your application, certainly making all these additional tools work together with your grandpa’s HTTP Server will become a hassle.

All Pain, but no Gain?

Skipping over a couple of painful (but short) years of writing custom Grunt and Gulp configurations to glue all your tooling together, only to fall short of that sweet nirvana of live-coding with results automatically refreshing and loading in the browser.

I’m sure many have gone down that rabbit hole, and finally emerged victorious. or close enough!

But was that time investment worth it?

Today, I just look for BrowserSync to solve almost all the headaches associated with web development, saving me both time & money.

What is BrowserSync

BrowserSync is testing utility, that operates a standalone web server, to serve you web pages locally, or over the network. It can watch for file changes and automatically reload or inject changes into the browser.

BrowserSync touts the following features:

Alright, that’s a good start, but what about testing specific functionality?

BrowserSync's Web UI BrowserSync’s Web UI

Feel like a Demigod

as Dave Rupert put it:

Want to feel like a modern day demigod? Fire up Browsersync and control an entire device lab with your phone.

BrowserSync’s ghostMode has to be one of the most useful features I use every day and one that’s so simply done it takes no effort to set it up at all:

// you can disable/enable each feature individually
ghostMode: {
  clicks: true,
  forms: true,
  scroll: false
}

Node.js is optional

While BrowserSync is written in Node.js, that does not mean that you or your project need to be running in Node to leverage this powerful utility.

Although the integration with build tools like Gulp & Grunt is super easy, your project might not be using those, you can still harness the full power of BrowserSync with just the command line:

# Watch ALL CSS files for changes with a static server
$ browser-sync start --files "app/css/*.css" --server --port 8080

Shut up and take my money!

BrowserSync is 100% free, all you need to do it is follow the install guide and you’ll be up and running in 5 minutes.

Helpful Resources:

Share the love

BrowserSync is an Open Source project from the JH team, they have put a huge amount of time and effort into supporting this free project, if you have used it and found it to be beneficial to your workflow, Here are a few small things you can do to show your support:

Comments
Contact