WordPress Developer Tip: Use BrowserSync for Cross-Device and Browser Testing

Having spent a good amount of time on WordPress theme development in the past 6 months, I’ve come up with a workflow that has helped me to work more efficiently. My most important tool has been Grunt and the Grunt BrowserSync plugin which I previously wrote about last year. Using BrowserSync during WordPress development allows you to quickly test your site on an unlimited number of web browsers and devices. The only limit is the number of such devices you have in your place of work :). Scrolling also is synced across all connected devices and browsers, making testing much faster.

Setting up BrowerSync with WordPress

It’s actually fairly easy to configure BrowserSync for your WordPress project using the BrowserSync grunt plugin. The first step is to install Grunt, the JavaScript task runner, within your WordPress project. I always place its config files within the directory of my project’s WordPress theme. After that, you can install the Grunt BrowserSync plugin using their installation steps. The critical step is to configure the plugin correctly to point to your WordPress project. In your Gruntfile.js file, just as for any plugin, you’ll need to add a section to set the configuration for the BrowserSync plugin. Here’s the relevant section of my Grunt config:

    browserSync: {
      dev: {
        bsFiles: {
          src: [
            '*.css',
            '**/*.php',
            'images/*.jpg',
            'images/*.png',
          ],
        },
        options: {
          watchTask: true,
          debugInfo: true,
          logConnections: true,
          notify: true,
          proxy: appConfig['proxy'],
          ghostMode: {
            scroll: true,
            links: true,
            forms: true
          }
        }
      }
    },

The proxy option here is key. Since I use this Grunt configuration on multiple machines, I have an appconfig.json file that stores machine-specific settings like this (which I don’t check into source control). My appconfig.json file for this project:

 {
  "proxy": "192.252.2.199/~sheelah/inspirepurpose"
 }

Note that you could of course just set the proxy directly in your Grunt config. Mine is set to the URL of my running WordPress installation for this project on my linux machine. For this project, “inspirepurpose” is the directory where WordPress is installed. Although my Grunt config is located within my WordPress theme directory, I use the actual URL of my local site when setting the proxy.

LiveReload and BrowserSync

BrowserSync allows you to see the effects of the changes you make (Sass, PHP, etc.) without manually reloading the page in your browser. You also don’t need to install a separate LiveReload plugin for this to work. The bsFiles setting in the BrowserSync section of your Grunt config file controls what types of files trigger a page reload on all of your connected devices and browsers. As mentioned in the BrowserSync Grunt plugin docs, the watchTask: true setting is required to have BrowserSync work correctly with your Grunt watch task, and BrowserSync needs to be configured in your registered Grunt tasks to run before your watch task, like this:

grunt.registerTask("dev", ["concat:js", "copy:dev", "browserSync", "watch"])

Testing With BrowserSync

The end result of this is that I can edit a Sass file (which will then be compiled into CSS by my Grunt Sass plugin), and then instantly see the new change on all of my connected devices. To verify that everything is working, start up Grunt:

$ grunt
Running "concat:js" (concat) task
File js/inspirepurpose.min.js created.

Running "copy:dev" (copy) task
Copied 1 file

Running "browserSync:dev" (browserSync) task

Running "watch" task
Waiting...
[BS] Proxying: http://192.252.2.199
[BS] Now you can access your site through the following addresses:
[BS] Local URL: http://localhost:3000/~sheelah/inspirepurpose
[BS] External URL: http://192.252.2.199:3000/~sheelah/inspirepurpose
[BS] Watching files...
[BS] Browser Connected: Chrome, version: 39.0.2171.95
[BS] Browser Connected: Chrome, version: 39.0.2171.95
[BS] Browser Connected: Firefox, version: 34.0

The output will give you the URL to open in your browser and will show you which browser are currently connected.

Make a change to your WordPress theme files or styles and you'll see the magic happen:

<< File "sass/navigation/_menus.scss" changed.
Running "sass:dev" (sass) task

Running "autoprefixer:dist" (autoprefixer) task

Done, without errors.

Execution Time (2015-01-28 19:04:50 UTC)
loading tasks        3ms  ▇▇ 3%
sass:dev           106ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 95%
autoprefixer:dist    2ms  ▇▇ 2%
Total 112ms

Completed in 0.825s at Wed Jan 28 2015 12:04:50 GMT-0700 (MST) - Waiting...
[BS] File changed: style.css

Your connected browsers should all reload to reflect the change that you made. Awesome stuff.