One crucial component in the process of developing a website is making sure your site is compatible with all target devices and browsers. While in an ideal world, every end-user would be using the latest versions of contemporary browsers such as Chrome or Firefox, this is, unfortunately, not always the case. A site’s content and intended user experience should be accessible to everyone (as much as possible), regardless of browser or device used.
There are many different tools and methods for cross-browser testing — Chrome Developer Tools, BrowserStack, BrowserShots, etc. While all of these tools can be useful for checking browser and device compatibility, most of them are built around only viewing one given “browser environment” at any given time, requiring switching back and forth for A/B testing.
To mitigate this somewhat tedious process, BrowserSync allows for completely synchronized testing, across any devices and browsers you want to use. This free, command line-based application will save you an enormous amount of time in the development process.
What does BrowserSync do?
As you view a webpage being watched by BrowserSync, any user-interaction in a given browser will automatically be synced across all browsers and devices viewing the same local server URL (for example localhost:3000). If you scroll on one browser, the other browser’s will automatically scroll to the same point. If you click a link within the project, the other browser’s will automatically redirect to the same target link.
While it may be viewed as a side-benefit/secondary concern of the program, an extremely useful feature of BrowserSync is its auto-reload functions. Once BrowserSync is running for a given project, all project files will be “watched”, and upon saving any watched files, the changes will automatically be loaded into the viewed page, all without having to reload/refresh the page. This is an enormous time-saver and cuts down on friction in the development process.
Installing BrowserSync
BrowserSync is available as an npm module, which will run directly in the command line / terminal.
BrowserSync requires Node.js/npm, so the first step is to install both of these. If you do not already have Node.js installed, you can download the latest version at the official Node.js site.
After installing Node.js, make sure that it is correctly installed by typing the following in your terminal:
node -v
This will tell you the version of Node that you are currently running.
Secondly, ensure that npm (the Node Package Manager) is also installed by typing:
npm -v
To install BrowserSync, simply type:
npm install -g browser-sync
This will install BrowserSync globally on your system, regardless of the current path you are in on the command line.
Getting Started with BrowserSync
Once BrowserSync is installed, you can start the virtual server in a few simple commands.
First, navigate to the root directory of your project:
cd ~/my_example_project
(Where ~myexample_project is the directory for your project)
For static sites using only .html files, you will use BrowserSync in server mode. To watch for any changes in a project’s .html and .css files, simply type:
browser-sync start --server --files "*.html, assets/styles/*.css”
(This is assuming all .html files are in your current path / root directory of the project, and that all .css files are in a directory called assets/styles. You can modify these pathways as appropriate.)
Using BrowserSync for dynamic sites when you are already running a local server with PHP or a similar scripting language, the process is very similar to server mode although will require to run BrowserSync in proxy mode. You can do this by typing:
browser-sync start --proxy "example-site.test" --files "*html, assets/styles/*.css”
Where example-site.test is the URL of your local server.
Conclusion
This is just the tip of the iceberg of what BrowserSync has to offer. BrowserSync easily integrates with other popular build tools such Grunt and Gulp, making its features very extensible (you can integrate Sass compiling, HTML injection for template engines, asset gzipping, and more). To find out more about what you can do with BrowserSync, check out their detailed documentation.
No Comments