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 manytools to manage its complex configurations.

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

Nowadays, almost everyprogramming 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!

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.

Shut up and take my money!

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: