Using BrowserSync for Debugging your localhost

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 language 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:

• Install and run anywhere: supports Windows, MacOS and Linux
• Free to run and reuse: The power of Open Source!
• Build-tool compatible: Easily integrated with task runners like Grunt and Gulp
• UI or CLI control: Browser-based UI for quick control, or command line usage for that nostalgia terminal feel.
• HTTPS: No fuss, local HTTPS. No need to generate certificates.
• Tunneling: Tunnel the Browsersync server through a Public URL using xip.io or localtunnel.me
• Auto Browser Launch: Automatically launch one or many browsers and directly point them to your local server.

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

• File sync: Browsers are automatically updated as you change HTML, CSS, images and other project files.
• Interaction sync: Your scroll, click, refresh and form actions are mirrored between browsers while you test.
• URL history: Records your test URLs so you can push them back out to all devices with a single click.
• Network Throttle: Test your website against a slower connection. Even when devices are connected to WiFi.
• CSS Outlining: Toggles CSS outlines on every element in your page.
• CSS Depth Outlining: Quickly highlight any potential layout bugs you may have in your CSS / HTML
• Fully Customizable Proxy: Proxy requests to existing vhost, WebSocket, or write your own middleware.
• Rewrite Rules: create your own rewrite rules. Mimic SSI, HTML Injection, etc ….
• Minification: automatically minify client-side JavaScript.
• Plugins: hundreds of Plugins available on npmjs.com

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:

• www.browsersync.io
• github.com/BrowserSync
• @BrowserSync

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:

• Tweet about it and spread the word.
• Star the project on github.
• Contribute! everything counts, from reporting bugs, to fixing them, and of course writing and publishing plugins to extend the functionality.