How to Improve Your Workflow With BrowserSync 2.0

Originally published at: http://www.sitepoint.com/improve-workflow-browsersync-2-0/
Web development involves considerable trial and error. Does this resemble your technique?…

  1. Open your site in a browser.
  2. Write or edit a line or two of code.
  3. Hit the browser’s refresh button. Return to step 2.

Then repeat — in multiple browsers on multiple devices using a variety of test methods. How many hours did this incur during the past year?

Fortunately, there are tools which can radically improve your work rate. I’ve been using BrowserSync for a year and it’s revolutionized my workflow. Version 2.0 has just been released and it’s even better. The latest edition offers:

Live reloading
Modify a file and your page will reload in all browsers. CSS is re-injected so the full page doesn’t need to be refreshed.

Interaction synchronization
Your scroll, click and form actions are mirrored across every browser. This is especially useful when testing mobile devices; you can modify an input field on your desktop and the same string will appear on all attached phones and tablets. Goodbye on-screen keyboards!
Continue reading this article on SitePoint

4 Likes

This is absolutely brilliant.

This was really good, Craig! Useful for UX testing as well as development.

BrowserSync is fantastic, but I cannot get it to work with the enterprise PHP application at work. All the public pages work, but when I try to login only one browser gets “inside”. Which browser can successfully login is a random timing issue, so the first one (or last one?) to send the login request wins. I think that the problem is the session handling that relies on cookies, because every browser gets a different session cookie. It would have been awesome if BrowserSync in proxy mode would synchronise the cookies between browsers. I found a closed issue on Github issues page, but it doesn’t work for me.

@ceeb, have you experienced problems like this or do you have an idea how to solve this?

I actually released something similar a couple of months ago: https://github.com/TomBZombie/NoF5 :slight_smile: Mine takes it a step further and also reloads the page when an .php, .tpl, .xml or any other file that’s required to generate the page is modified… it also doesn’t use a browser addon, you just include the .phar file in your php script on the server and it just works.

Interesting problem. I’ve only used BrowserSync on public sites so haven’t experienced it.

I don’t see why it wouldn’t work if every browser follows the login procedure. However, if your system only permits one logon session per user, only one browser would get it - the rest would fail.

That looks good, Tom. I think BrowserSync can follow any file type too - I just used HTML and CSS in my example. Nor does it use a browser addon - it just inserts a small script into your page (automatically or you can do it manually).

Never tried it so now it will have to go in my list of things to try. Because you really need to try what’s out there to see if you can improve…

You’re cruel guys… Do you know how much stuff is out there that you make me want to try? I don’t have time for everything ! :wink:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.