BrowserSync
What is browsersync?
It's a browser testing tool, When you make web pages for different browsers and different devices. Or you can say when you working on responsive web pages, you need to check web pages on all these different devices and browsers, So testing work is really tedious when you make some changes on html/css files and test it into different devices with different browser. The tool "browsersync" makes the testing work is really easy, this is one of the best feature of browsersync.
Here some main features I have listed out.
Interaction sync
You can mirror the various user's interactions for different browsers like, On a sinlge browser, If a user click a link, click on button or scroll the page, these all actions would be mirror on other browsers, Suppose If you perform click action on chrome browser, this action would be perform into firefox and safari automatically.
File sync
Whatever changes you made with html, css or images, this changes would be updated on browser automatically without page refresh, Suppose if there is only one tag <p > is existing in your page, now you would add image with <img> tag then there is no need to page refresh in browser, there would automatically refresh the page and shows the image with <img > tag in browser.
Browser support,
Most of the time we have to test our web pages on different devices like computer, tablet, mobile etc. With the use of browsersync we can test the page on a single device and the action would be mirror in other devices as well. Suppose if you are making changes on some files and testing it on a desktop computer, at the same time we can see the differences on other devices like tablet, mobile etc synchronously, so we can do perform an action on single device and mirror this action on all other devices.
Remote Debug:- You can do remote debug like, From your desktop computer you will be able to do debug html page displaying in android phone , for it these separate device should be connected.
How to install?
What other things you required.
It's a module of nodejs package, For run this tools you need to installed nodejs on your computer.
After installed the nodejs you need one of these command to let run by CLI.
For install globally which means you can run browser-sync from anywhere.
$ npm install -g browser-sync
For install locally which means you can run browser-sync fom locally only.
$ npm install browser-sync --save-dev
Also you can use this tool with task runner like Grunt and Gulp.
Good Resource
https://www.youtube.com/watch?v=heNWfzc7ufQ
In future post, I will explore the answer of below questions.
How to use it?
How it works?
What is browsersync?
It's a browser testing tool, When you make web pages for different browsers and different devices. Or you can say when you working on responsive web pages, you need to check web pages on all these different devices and browsers, So testing work is really tedious when you make some changes on html/css files and test it into different devices with different browser. The tool "browsersync" makes the testing work is really easy, this is one of the best feature of browsersync.
Here some main features I have listed out.
Interaction sync
You can mirror the various user's interactions for different browsers like, On a sinlge browser, If a user click a link, click on button or scroll the page, these all actions would be mirror on other browsers, Suppose If you perform click action on chrome browser, this action would be perform into firefox and safari automatically.
File sync
Whatever changes you made with html, css or images, this changes would be updated on browser automatically without page refresh, Suppose if there is only one tag <p > is existing in your page, now you would add image with <img> tag then there is no need to page refresh in browser, there would automatically refresh the page and shows the image with <img > tag in browser.
Browser support,
Most of the time we have to test our web pages on different devices like computer, tablet, mobile etc. With the use of browsersync we can test the page on a single device and the action would be mirror in other devices as well. Suppose if you are making changes on some files and testing it on a desktop computer, at the same time we can see the differences on other devices like tablet, mobile etc synchronously, so we can do perform an action on single device and mirror this action on all other devices.
Remote Debug:- You can do remote debug like, From your desktop computer you will be able to do debug html page displaying in android phone , for it these separate device should be connected.
How to install?
What other things you required.
It's a module of nodejs package, For run this tools you need to installed nodejs on your computer.
After installed the nodejs you need one of these command to let run by CLI.
For install globally which means you can run browser-sync from anywhere.
$ npm install -g browser-sync
For install locally which means you can run browser-sync fom locally only.
$ npm install browser-sync --save-dev
Also you can use this tool with task runner like Grunt and Gulp.
Good Resource
https://www.youtube.com/watch?v=heNWfzc7ufQ
In future post, I will explore the answer of below questions.
How to use it?
How it works?
No comments:
Post a Comment