Testing in multiple browsers using browser-sync

The following instruction describes how to use browser-sync to test web code in multiple browsers, with the ability to detect code changes residing in a directory, including all sub-directories recursively.

  • Download and install Node.js
  • Open DOS command window and run 
    npm install -g browser-sync
  • Go to your parent directory underneath which HTML (CSS and javascript) files are located
  • Run 
    browser-sync start --server --directory --files "**/*.*"
  • This will start up a mini web server at default port and launch default browser window, e.g. Chrome. "--directory" means directory list helping you to naviage to files.
  • Click folder or HTML files to open the page you want to test
  • Optionally, if you want to test a different type of browser (e.g. FireFox) at the same time, open FireFox and copy paste the same url
  • Make code change in your editor and save
  • Watch both browsers automatically refresh to test your changes!!!
Happy coding!

No comments: