Cross-browser and cross-device testing with BrowserSync

Posted by on Dec 22, 2015 in , , | No Comments

BrowserSync scrolling illustration

Cross-browser and cross-device testing is a vital part of front-end web development, and let’s face it, a time consuming one! Manually testing your code in multiple browsers and mobile devices is one of those jobs that just screams out to any forward-thinking developer:

‘There must be a better way to do this!’

…and indeed, with BrowserSync, there is! During this blog post I’ll quickly introduce the wonders of BrowserSync and run you through a basic implementation using Grunt, ready for you to adapt to your personal workflow.

Automation – a must to increase workflow
A modern front-end developer’s workflow should accommodate the processes that the ever-changing digital landscape demands of it. Implementing boilerplates and frameworks, linting, performance analysis, dependency management and abstraction are just some of the areas of increasing focus, and almost all of these can benefit from automation.

With the emergence of preprocessors and task runners over the last few years, front-end development is more dynamic than it has ever been. As a result there is a whole host of automation tools out there (Grunt, Gulp, BrunchBroccoli etc) and I like to enhance the cross-browser and device testing area of my workflow with the use of BrowserSync.

Introduction to BrowserSync
BrowserSync is a live-reloading browser testing tool that saves huge amounts of time due to it’s cross-device focus. It watches as you edit your code and live-reloads your browsers and devices in sync, so you can see the corresponding changes instantly!

Gone are the days of opening multiple browsers, pressing the refresh button / shortcut keys on all of them individually, then propping up the tablet and smart phone and refreshing them too. BroswerSync allows devices to sync to your desktop browser windows remotely, reflecting scroll position, button presses and even user inputs. What’s more, it offers remote debugging and latency throttling, as well as an ever-increasing number of other features.

Implementing BrowserSync using Grunt
I thought I’d quickly run through a simple implementation of BrowserSync using Grunt on a Mac. No bells and whistles here, just a simple 6 step guide to get up and running, so you can discover the benefits of using BrowserSync and adapt it to your personal workflow. I’m going to assume you have npm installed already (if not, here’s the official guide).

  1. In terminal, cd to your project folder and type:
    $ npm init

    Follow the terminal instructions, giving your project a name, version, description etc.

  2. Install Grunt and save it as a dependency:
    $ npm install grunt --save-dev
  3. Install BrowserSync and save it as a dependency:
    $ npm install grunt-browser-sync --save-dev
  4. Create a Gruntfile.js file:
    $ touch Gruntfile.js
  5. Add this to Gruntfile.js:
    module.exports = function (grunt) {
        grunt.initConfig({
    
            browserSync: {
                dev: {
                    bsFiles: {
                        src : [
                            'app/css/*.css',
                            'app/js/*.js',
                            'app/*.html'
                        ]
                    },
                    options: {
                        watch: true,
                        server: './app'
                    }
                }
            }
    
        });
    
        // load npm tasks
        grunt.loadNpmTasks('grunt-browser-sync');
    
        // define default task
        grunt.registerTask('default', ['browserSync'] );
    };
    
  6. Run the ‘default’ task, starting a server and opening a browser window:
    $ grunt

Notes:

  • $ simply denotes a new terminal command (do not write this in your terminal window).
  • If you just want to test BrowserSync as fast as possible (setting up Grunt apprehensively is not a goal) you can just hit enter through all terminal instructions in stage 1.
  • ‘app’ is the name of the application’s folder within the base folder in this instance, you may of course wish to amend this to your desired folder name.
  • This is an extremely simple starting point (I have incorporated BrowserSync into a much more complex Grunt workflow), but I wanted to share the basic principle in this instance.

That’s it; it will start up a BrowserSync web server and watch the .html/css/js files of your application, reflecting any amends to these files in desktop and/or mobile devices browser windows.

Moving Forward
Now that you have a very simple instance of BrowserSync set up, why not dig into the docs and spend a little time thinking about how you can integrate it into your personal workflow? There are plenty of features that I haven’t delved into in this post, best explained by BrowserSync themselves: options, API and recipes. It’s a fantastic tool and you (and your clients) will enjoy the time-saving benefits!

Leave a Reply