{"id":19930,"date":"2019-06-03T21:19:59","date_gmt":"2019-06-03T13:19:59","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=19930"},"modified":"2023-04-06T19:03:53","modified_gmt":"2023-04-06T11:03:53","slug":"synchronously-test-website-in-multiple-devices","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/synchronously-test-website-in-multiple-devices\/","title":{"rendered":"How to Synchronously Test Your Website on Multiple Browsers & Devices"},"content":{"rendered":"

When building a responsive website we\u2019ll need to test it in multiple screen-sizes to make sure that the site layout is rendered properly on those varying screen-sizes. We can use screen-size and device emulator in Chrome<\/a> which is pretty handy. However, nothing beats testing the website on a real device since it provides an environment that\u2019s as close as to our users.<\/p>\n

Testing on multiple devices also pose a problem though. Say we have three devices to test the site on, we may end up having to constantly refresh each browser in every of these devices everytime we\u2019ve just made a change which, as you can imagine, is cumbersome.<\/p>\n

The idea of synchronized testing<\/strong> has emerged to address this situation and make the workflow more streamlined. There is a Grunt plugin called BrowserSync<\/a> to perform this, and we are going to show you how to deploy it in your project, in this post.<\/p>\n

Recommended Reading:<\/strong> Viewport Emulation With Chrome\u2019s Device Metrics<\/a><\/p>\n

BrowserSync is open-source<\/strong> and actively developed. It is cross-platform<\/strong>. You can use it in Windows, OS X and Linux<\/strong>. Ghostlab, on the other hand, is only available in OS X and Windows. BrowserSync is free<\/strong> which helps if you have little to no budget to work with.<\/p>\n

Without further ado, let\u2019s see how BrowserSync works.<\/p>\n

Installation<\/h2>\n

To start off, we are going to use Grunt. We will need to make sure that the grunt-cli is installed as well the plugin, Grunt BrowserSync<\/a>. This plugin sync<\/em>s a number of interactions that occur on the website including page scrolling, populating form fields, and clicking on links.<\/p>\n

All these actions will be reflected in the other browsers and devices as they are happening. Type the following command to install BrowserSync in your working directory:<\/p>\n

\r\nnpm install grunt --save-dev\r\nnpm install grunt-browser-sync --save-dev\r\n<\/pre>\n
Configuration<\/h3>\n
Once installed, load BrowserSync within the Gruntfile.js<\/strong>, this way.<\/p>\n
\r\nmodule.exports = function (grunt) {\r\n    grunt.initConfig({\r\n        browserSync: {\r\n            bsFiles: {\r\n                src : [ 'index.html', '.\/css\/*.css' ]\r\n            },\r\n            ghostMode: {\r\n                clicks: true,\r\n                forms: true,\r\n                scroll: true\r\n            },\r\n            options: {\r\n                server: {\r\n                    baseDir: \".\/\"\r\n                }\r\n            }\r\n        }\r\n    });\r\n\r\n    \/\/ load npm tasks\r\n    grunt.loadNpmTasks( 'grunt-browser-sync' );\r\n\r\n    \/\/ define default task\r\n    grunt.registerTask( 'default', ['browserSync'] );\r\n}\r\n<\/pre>\n
This configuration will monitor the style.css<\/code> as well as the index.html<\/code>, and automatically refresh the browser when it detects a change on these files. We also enable ghostMode<\/code> to sync interactions on the website<\/strong> such as scrolling, and clicking.<\/p>\n
It\u2019s all set. Now, we run the grunt<\/code> to initiate the browserSync<\/code> task that we\u2019ve already set in the config.<\/p>\n
\r\ngrunt\r\n<\/pre>\n
Unlike the older version, the new BrowserSync will now setup everything for use including the static server and provides the URLs where it lives to reload our site.<\/p>\n
\"\"<\/figure>\n
And you can see from the following animated GIF, all updates, changes, and interactions<\/strong> are synced in real time in the browser as change the index.html<\/code> and style.css<\/code>.<\/p>\n
\"browser<\/figure>\n
Further Resources<\/h3>\n
Here are more resources to dig further into Grunt and \u201cSynchronized Testing\u201d.<\/p>\n