With apologies to Mr. Poe:
I was fuming in frustration, sitting clicking at my station,
I’ll spare you some narration, but I was getting pretty sore.
‘Surely there must be some method, whereby changes are detected,
And perhaps then be injected into my page’s DOM!’, I swore.
‘Some way to edit CSS without it being such a chore,
And click Refresh nevermore.’
So I then took up the challenge, and began a quest for knowledge
on this strange mysterious thing for which I’d searched some times before.
But amidst auto-refresh plugins, and bookmarklets by the dozen,
Nothing did I find which would my page’s state restore.
Then I chanced upon a newsfeed and this here did it implore:
“BrowserSync, you will adore.”
— not quite Edgar Allen Poe
$ browser-sync --server --files "*.html, css*.css"
which will start up a node.js web server serving your static files. The server will also monitor your files for changes.
But here’s the cool part.
But here’s the really cool part.
As might be expected, if an html page changes, the page in the browser gets notified, and triggers the browser to refresh the page. But the really amazing (to me) part is that if a CSS file (or an image, apparently…I didn’t test images) gets modified, the CSS for the page gets updated in place, without changing the DOM state of the page. As in, no page refresh. Anyone who has ever spent long hours tweaking the design of a highly dynamic website or web application is probably jumping up from their chair yelling something like "MUST! HAVE! NOW!".
At least that’s what I did. But I’m kind of excitable sometimes. Anyway…
Not Just For Static Files
Some of you may be concerned that you won’t be able to leverage this awesomeness because your code is dynamically generated by a backend app, be it PHP, Python, Java, Ruby, Node, or whatever.
Not to worry, BrowserSync can handle this. In addition to "server mode", it also has a proxy mode, which sits in front of an existing server and injects the same websocket client into any pages it serves. If you point it to your source files, it can trigger page refreshes on changes to your PHP, Python, etc.
Not Just For Development, Either
In addition to near-real-time CSS editing, and auto-refreshing web pages, BrowserSync has one more trick. You can tell the injected websocket client to report certain user activity in the browser, like scrolling, clicking links, and filling out form fields. And then the BrowserSync server will mirror those events into any other browser connected to it.
So you can test your site on multiple browsers simultaneously.
Mind. Blown. BrowserSync wins.
Do yourself a favor and check it out.
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.