I am very specific about my workflow. I like things a certain way. DRY — Don’t Repeat Yourself, has been the core philosophy behind the way I work. If anything seems like a grunt task, something that I find myself doing, again and again, I will work to automate it. Thankfully, WordPress automation tools and scripts allow you to optimize several tasks.

Once automated, things become easy and error-free. Manual work, with less modular code, is always hard, takes a lot of time, and gives me a great deal of pain.

One of the most tedious problems is reloading your browser everytime you change something on your theme or plugin.

In this post, I will introduce you to time-saving synchronized browser testing in WordPress using BrowserSync. By the end of this article, you’ll be equipped with the practical knowledge to automate your browser testing, syncing it with other devices, and sharing your local development sites online without having to upload any files on a dev/staging server.

Automated Browser Testing with BrowserSync

BrowserSync is an automation tool which ensures a speedy web development process. It does so by synchronizing file changes and interactions across multiple devices.

BrowserSync has helped me cut down at least two-thirds of the time I had to spend on automating sync between different browsers on different devices. I put in a lot of work to make my site look good from every angle. However, analyzing each and every change becomes difficult. But with BrowserSync you can achieve your goals quite quickly.

How does BrowserSync Works?

BrowserSync helps you auto-reload you browser when any type of file gets changed. For example, if you changed the color of your nav bar and press save in a CSS file, you’ll have to come to your website and reload it to see if the change did actually happen.

But with BrowserSync it will either auto-reload the browser for you, as soon as you change a file or if the changes are too small, it will inject them inside the site, without even reloading it. Hence saving you hours of development time.

For Static Sites: BrowserSync will create a simple HTTP server that runs your site on the localhost with a particular port.

For Dynamic Sites: If you’re working on a dynamic site like is the case with WordPress, you already have a server running through something like VVV, DesktopServer, or MAMP/XAMP, etc. In this case, you can use BrowserSync as a proxy server to piggyback on your dynamic server.

Also, BrowserSync injects a JavaScript file on every page. The purpose of this file is to interact with the server and the client to watch changes in your code or browser action. The moment it detects any change, it performs a live page reload.

Features of BrowserSync

BrowserSync’s impressive feature-set help me with the following stuff:

  • Live Reloading: Synced testing across different browsers is probably the most important feature of BrowserSync. All the changes in your code and the page are auto-reloaded. Live reloading across browsers and devices helps me test similar features in a single click with synced scroll, clicks, form inputs, etc.
  • CSS Injection:  One primary function of BrowserSync is to watch all the CSS files which are currently available in your css directory. Later, when a change is made, it updates all the connected browsers without letting any web page to reload.
  • Well-interacted Synchronization: This means that all the changes are mirrored across all the browsers and devices in a single go.
  • Tunneling: Displaying a work-in-progress website to anyone is a feature which BrowserSync has supported since the day one. Just change the port and set up a tunnel through a random public URL (provided by BrowserSync). It provides an excellent opportunity to test on multiple devices and also share with your teammates in minutes.
  • Develop With Slower Connections in Mind: Internet speed is a factor which may vary globally, and you have no control over it. So, to get an idea how your site performs at slower internet speed, BrowserSync has a feature which you can use to throttle your site connection speed.
  • URL History: BrowserSync logs all browsing history so you can push a test URL to all devices.
  • Third-Party Tools: BrowserSync can easily integrate with multiple task runners like Gulp and Grunt. Also, it works equally well with all operating systems.

 

BrowserSync can sync sites across a number of devices, scrolls, clicks, form entries and everything. Which is super cool!

Installing the BrowserSync Setup

To install the BrowserSync default plugin into your WordPress project follow these steps:

Step #1: Install NodeJS & NPM

BrowserSync is an NPM package, and it needs Node.js to be installed. If you’ve already installed it earlier, just check through the following commands:

node -v
# v7.10.0

npm -v
# 4.2.0

Step #2: Install BrowserSync

Next, you’ll install BrowserSync globally by typing the following commands in your terminal.

npm install -g browser-sync

This will download all the BrowserSync files and install them globally to make it available to your projects. To confirm the successful completion of its setup, in your terminal type:

browser-sync --version

By doing so, you should get some response like BrowserSync version 2.18.12 which is the most recent one at the time of writing.

Step #3: Using BrowserSync with Command Line

You can also use BrowserSycn setup with your command line. Here is the set of commands that can be run:

$ browser-sync start [options]     Start Browsersync
$ browser-sync init                Create a configuration file
$ browser-sync reload              Send a reload event over HTTP protocol
$ browser-sync recipe [name]       Generate the files for a recipe

Step #4: Help in Command Line

To seek any help for BrowserSync type the following command:

$ browser-sync <command> --help

You can use this command in your project as follows:

# Get help for the start command only
$ browser-sync start --help

# Get help for the recipe command only
$ browser-sync recipe --help

Step #5: browser-sync start Commands

The browser-sync start command supports a set of actions which are preceded with a “–“. You can add any number of these arguments to get the best out of BrowserSync. Here’s a non-exhaustive list.

--server, -sRun a Local server (uses your cwd as the web root)
--serveStatic, --ssDirectories to serve static files from
--portSpecify a port to use
--proxy, -pProxy an existing server
--wsProxy mode only - enable websocket proxying
--browser, -bChoose which browser should be auto-opened
--files, -fFile paths to watch
--indexSpecify which file should be used as the index page
--pluginsLoad Browsersync plugins
--extensionsSpecify file extension fallbacks
--startPathSpecify the start path for the opened browser
--httpsEnable SSL for local development
--directoryShow a directory listing for the server
--xipUse xip.io domain routing
--tunnelUse a public URL
--openChoose which URL is auto-opened (local, external or tunnel), or provide a url
--corsAdd Access Control headers to every request
--config, -cSpecify a path to a configuration file
--hostSpecify a hostname to use
--logLevelSet the logger output level (silent, info or debug)
--reload-delayTime in milliseconds to delay the reload event following file changes
--reload-debounceRestrict the frequency in which browser:reload events can be emitted to connected clients
--ui-portSpecify a port for the UI to use
--watchEventsSpecify which file events to respond to
--no-notifyDisable the notify element in browsers
--no-openDon't open a new browser window
--no-onlineForce offline usage
--no-uiDon't start the user interface
--no-ghost-modeDisable Ghost Mode
--no-inject-changesReload on every file change
--no-reload-on-restartDon't auto-reload all browsers following a restart

Let me just show it to you how you can use them with a few useful examples.

Step #6: Running BrowserSync

I’m sure by now you have a decent idea about BrowserSync and its working. Let’s now define the commands for its actual operation and see how it works.

I’ve mentioned that BrowserSync creates a server for static websites and can be used as a proxy for dynamic sites. Therefore, it defines separate commands for each of these.

Static Websites

If you are developing a static site, just head over to the site project folder, and inside the root folder run this command in your terminal.

browser-sync start --server --files "css/*.css"

The “css/*.css" means that BrowserSync watches all the CSS file changes inside your project folder.

To make BrowserSync watch all types of files type the following command:

browser-sync start --server --files "**/*"

Here, **/* means any/all directories and all files inside them.

Dynamic Websites

Since with WordPress development, you already have a server running your dynamic site (e.g. DesktopServer, MAMP, VVV, etc) — here you can use BrowserSync as a proxy. Let’s say you have a local site called local.dev to start BrowserSync for such a site run the following command:

browser-sync start --proxy "local.dev" --files "**/*"

And BrowserSync will start watching your dynamic site for changes.

Step #7: Tunneling

Like I’ve mentioned earlier, BrowserSync lets you share a local development site with your teammates over the internet right from your own computer. This is where the tunnel option from BrowserSync comes into play. Each time you start BrowserSync, just enter the “-- tunnel” argument to it like:

browser-sync start --proxy "local.dev" --files "**/*" --tunnel

Running this command will provide you with a set of the following information:

  • Local URL: This is the regular URL of your local host which keeps on reloading for your changes.
  • External URL: The URL which you can access on the local Wi-Fi network, the one I use to test my site on a number of other devices.
  • Tunnel URL: The URL which you can share publically with your teammates across the globe and they can take a look at your local site, inside your computer, just as if it is on a staging server.
  • UI: This is the default UI to configure BrowserSync.
  • UI External: To set the default UI on any local network use this external link.

BrowserSync UI

Click the BrowserSync UI link and you’re directed to a new browser window (Hot tip: You can press and hold Command ? on Mac while clicking the link in the terminal to open it right away). Here, you find a range of options which can be configured. All you have to do is click on the left sidebar and set it accordingly.

Conclusion

That’s it for today. BrowserSync is a robust browser automated testing tool which improves my development workflow. I think it should be added to your WordPress automation toolkit. Believe me; it’s totally worth it. For more details on how BrowserSync works with tools like Gulp and Grunt, you can click here.

I’d love to hear your comments on this. Share your experience with me.

As usual, don’t hesitate to leave any questions or comments below, and I’ll aim to respond to each of them.

Ahmad Awais is a senior Full Stack Web Developer, regular WP Core Contributor, Front-end Fanatic and an accidental writer. He loves to write, build, talkand share everything about WordPress & professional Open Source software. Connect with him at Twitter and subscribe to his WordPress Newsletter!

The post Automate Your Workflow with BrowserSync appeared first on Torque.

Share This