Browsersync – the developer tool you didn’t know you needed

Browsersync has been around for a long time, but I’m still surprised by the number of developers who don’t know of its existence or purpose. As someone who loves efficiency, I feel it’s my duty to spread the good word about this incredible tool.

What is Browsersync?

In a nutshell, Browsersync is a tool that syncs all your browsers and devices together using one URL.

For example, if you need to test a website across multiple devices or browsers, Browsersync gives you a localhost URL to view your site (e.g., 10.0.0.39:3000). Once set up, you can interact with the site on one device—scrolling, clicking, or navigating—and Browsersync will mirror those actions across all connected devices. This eliminates the need to multitask by manually refreshing and testing on each device individually.

The only requirement is that all your devices need to be on the same wireless network.

Tired of hitting refresh constantly?

Browsersync shines when paired with a task runner like Gulp or Grunt. Using a Gulp watch task, for instance, you can set up Browsersync to automatically refresh your browser whenever you save changes to your code. This means:

• No more hitting refresh a hundred times an hour.
• Instant feedback on your edits.
• A smoother and faster workflow overall.

Key features of Browsersync:

• Live reloading: See your changes reflected immediately in the browser when you update your code.
• Multi-device syncing: Interact with your site on one device, and see those interactions mirrored on others.
• Cross-browser testing: Test your project on different browsers simultaneously with synchronised behavior.
• CSS injection: Injects CSS changes without needing a full page refresh, making styling updates lightning-fast.

How to get started

If you’re working on a WordPress theme or web project without Gulp or Webpack (or other pre-processor) you can use BrowserSync with a simple setup. Here’s how:

1. Install BrowserSync globally (if you haven’t already):

npm install -g browser-sync

If this command doesn’t work, you’ll need to make sure you have Node.js and npm installed. You can check this by running the following commands:

node -v
npm -v

If not you’ll need to follow steps to install Node.js and npm.

2. Run BrowserSync with PHP-based projects (like WordPress):

Navigate to your project folder, or WordPress theme:

cd path/to/your-project

browser-sync start --proxy "your-local-site.test" --files "**/*.php, **/*.css, **/*.js"

Replace your-local-site.test with your local development URL e.g., projectname.local. (I set my local dev URL up using MAMP). This watches for changes in PHP, CSS, and JS files and refreshes the browser accordingly.

Make sure to customise this part “**/*.php, **/*.css, **/*.js” so it includes the file types and directories you want. *.php will look for all .php files. Whereas *.html will look for .html files.

When you start Browsersync using the command above it will automatically open your project in the browser with an address such as localhost:3000.

Setting it up using Gulp

If you’re using Gulp like I do, here’s a quick setup example:

1. Install Browsersync

npm install browser-sync gulp --save-dev

2. Add it to your Gulp file:

const gulp = require('gulp');
const browserSync = require('browser-sync').create();

// Serve and watch for changes
gulp.task('serve', function () {
    browserSync.init({
        server: './', // or specify your project directory
    });

    gulp.watch('*.html').on('change', browserSync.reload);
    gulp.watch('css/*.css').on('change', browserSync.stream);
});

gulp.task('default', gulp.series('serve'));

Run your Gulp task: gulp

You’ll get a URL that you can use across all your devices to test your project in real time.

Here’s a demo

Here’s an example of it in action (posted to my Instagram last year). This shows multiple devices viewing the same project through a local URL.

View this post on Instagram

A post shared by Jo Loveridge (@joloveridge_developer)

Why you should start using Browsersync

Whether you’re a solo developer or part of a team, Browsersync will drastically improve your workflow. It saves time, reduces frustration, and ensures consistent results across devices and browsers. If you’re not already using it, now is the time to try it out. Trust me, once you’ve used Browsersync, you won’t want to go back.

It’s one of my favourite development tools and one of the first things I install on a project. Do you have a tool you HAVE to use on every project? Let me know in the comments or give me a shout on socials.