As a matter of fact let’s accept that developers hate doing grunt work. Instead of repeating things again and again, a pro web developer believes in hardcore automation and would love to invest time in automating things. WordPress site setup and browser testing strongly support the DRY \u2014 Don’t Repeat Yourself philosophy and encourage you […]<\/p>\n","protected":false},"author":3,"featured_media":1194,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":""},"categories":[18],"tags":[],"coauthors":[],"jetpack_featured_media_url":"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/BrowserSync.jpg","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/1181"}],"collection":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/comments?post=1181"}],"version-history":[{"count":0,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/posts\/1181\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/media\/1194"}],"wp:attachment":[{"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/media?parent=1181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/categories?post=1181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/tags?post=1181"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/thedevcouple.com\/api\/wp\/v2\/coauthors?post=1181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Synchronized Browser Testing With BrowserSync<\/h2>\n
[ecko_fullpage_image]<\/p>\n
![\"\"](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-06-13.54.36.png\")
<\/p>\n
[\/ecko_fullpage_image]<\/p>\n
BrowserSync<\/a><\/strong> is an intuitive automation tool which helps to speed up your web development. It synchronizes all forms of file modifications and even interactions across numerous display screens.<\/p>\n If you’re not using BrowserSync to automate your workflow, then you’re certainly missing out something. It has become an indispensable tool for many web developers and has also helped me improve efficiency and reduce cross-browser inconsistencies.<\/p>\n I completely understand how frustrating it can become to monitor every single change but thanks to BrowserSync whose amazing feature-set helps you to get through it all too quickly.<\/p>\n Earlier, whenever you made any changes in your files, you’ll have to perform a manual reload in your browser. BrowserSync not only detects any type of file changes but also reloads it automatically \u2014 and that too in a fraction of a second. Also if your changes are too small, then\u00a0it will inject them inside the site, without even reloading it. This entire process saves ample time and increases your productivity.<\/p>\n BrowserSync also injects a JavaScript file on every web page. This helps to improve the communication between the client and the server to watch changes in your code or browser action. So whenever a change is detected, it performs a live page reload.<\/p>\n BrowserSync works exceptionally well for both static and dynamic sites.<\/p>\n BrowserSync is equipped with multiple handy features like:<\/p>\n It\u2019s incredibly simple to get started with a basic setup of BrowserSync. Just follow the steps which I am going to list.<\/p>\n Tools like BrowserSync are the node modules. Hence,\u00a0you should have NPM installed already. If you don\u2019t,\u00a0then do it now with the following commands.<\/p>\n To install BrwoserSync globally, type in your terminal:<\/p>\n The next step is to confirm the successful completion of its setup. This can be done by using the following command.<\/p>\n Make sure you get the most recent version. In my case, it is\u00a0version 2.18.12.<\/p>\n When it comes to the actual working of BrowserSync, then I’ve already mentioned that it depends upon whether you’re working with static or dynamic websites. Let me write the commands for both of these.<\/p>\n For Static Websites:<\/strong><\/p>\n While working with a static website, just open the root folder and type the following in your terminal:<\/p>\n This command lets BrowserSync watch all kinds of files and report any changes.<\/p>\n For Dynamic Websites:<\/strong><\/p>\n As far as dynamic sites are concerned, the BrowserSync now behaves as a proxy server. Now its command will be like:<\/p>\n And\u00a0BrowserSync will start watching your dynamic site for changes.<\/p>\n Now it’s time to explain how you can share and showcase a work-in-progress project with its tunneling feature.<\/p>\n Each time you start BrowserSync, just enter the “ This command provides you with a set of the following information:<\/p>\n All these are the clickable URLs which can be shared both locally and globally. However, the URL for the BrowserSync UI’s has some fascinating facts to reveal. Click this link, and you’ll be directed to a new browser window from where you can configure all the BrwoserSync settings.<\/p>\n Apart from this, BrowserSync offers several other exciting features like\u00a0options<\/a>, API<\/a>, and recipes<\/a>\u00a0which you can find on their website.<\/p>\n Having the ability to perform all the actions which I’ve listed above, BrowserSync has helped me become a better developer and has brought consistency in my workflow.<\/p>\nWorking<\/h2>\n
BrowserSync For Both Static & Dynamic Websites<\/h3>\n
\n
Features<\/h2>\n
\n
A Basic Implementation of BrowserSync<\/h2>\n
Install NodeJS & NPM<\/h3>\n
node -v\r\n# v7.10.0\r\n\r\nnpm -v\r\n# 4.2.0<\/pre>\n
Installing BrowserSync<\/h3>\n
npm install -g browser-sync<\/pre>\n
browser-sync --version\r\n<\/pre>\n
![\"\"](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-06-13.29.02.png\")
<\/p>\nRunning BrowserSync<\/h3>\n
browser-sync start --server --files \"**\/*\"<\/pre>\n
browser-sync start --proxy \"local.dev\" --files \"**\/*\"<\/pre>\n
Tunneling<\/h3>\n
-- tunnel<\/code>” argument to it like:<\/p>\nbrowser-sync start --proxy \"local.dev\" --files \"**\/*\" --tunnel<\/pre>\n
![\"\"](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/Screenshot-2017-06-06-13.40.09.png\")
<\/p>\n![\"\"](\"https:\/\/thedevcouple.com\/wp-content\/uploads\/2017\/06\/FxJxJfL.png\")
<\/p>\nWrapping Up!<\/h2>\n