BrowserSync a Node.js module that makes your life easy with testing your codes in multiple browser in same time.
Like the LiveReload plugin BrowserSync monitor (watch) the file system and reload web page upon file save. But the unice things about BrowserSync when you test a webpage in one browser like opening Menus, fill-up a form, scroll to a location… it will sync the actions across all the browsers that have a open window with the corresponding webpage.
Up And Running BrowserSync
As BrowserStack is a Node.js module, if you don’t have Node.js installed you have to install it first.
Node.js have installer for Windows, MacOS and also for Linux. Node.js can be download from https://nodejs.org/download/. Please read their documentation for installing Node.js
If you already have Node.js or you just install Node.js you can verify Node.js installed correctly by running node --version or nodejs --version or node -v. This commands very depending on your OS and Node.js Version.
We will use Node.js package Manager (NPM) to install BrowserSync from it’s repository.
Open a Terminal window or Command Prompt and run the following command to install BrowserSync:
npm install -g browser-sync
This will install BrowerSync globally in your OS.
After installation is done you can check it by running browser-sync --version. This will return the version of installed BrowerSync.
Now we can use BrowserSync for our web development projects.
Make a test folder in your workspace and navigate to the folder with your command line tool. Then make some files eg.
Now from your command line run the following command to test the files inside this ‘Test’ folder:
browser-sync start --server --files ”*.html, css/*.css, js/*.js”
To test dynamic sites (site made with sarver side language) like Joomla, WordPress or any other system that need server side interpreter (Like php), database system etc. we have to warp the vhost/sites base url with BrowseSync’s Proxy URL. To do that run the following command:
browser-sync start --proxy ”localhost/path-to-your-script/” --files ”*.php, css/*.css, js/*.js”
BrowserSync have also have a nice web based ui. Which can be accessible via browser. You can find BrowserStack’s ui URL from the command line output after the BrowserSync starts.
Happy Browser Testing
For More Information and Uses Guideline Please check BrowserSync Documentation. More