LiveReload, a must have for web development

I’ve been doing quite a lot of web development lately. Both for fun and for a living. Being addict on quick feedback, I’ve always searched ways to visualise very quickly the impact of changes on my code. Most people are happy with the default way of getting feedback. They save their code, redeploy the application, switch to the browser window, click refresh. done.

There are well known shortcuts to this basic workflow. For example, most modern web framework support a dev mode without redeploy. Sometimes even hot reload of java code. Also some text editor or IDE don’t need to to save your code, it’s done in the background. Do what’s left to do?

Change the code, switch window, reload

This is too much work for me. I hate switching window. it’s a pain and a distraction.

Three years ago, I was using an auto-refresh plugin for Safari that would refresh the current web page every second. That was nice already. Change your code, save and boom it’s refreshed. And boom it’s refreshed. And boom it’s refreshed. And boom it’s refreshed. And boom it’s refreshed…

OK, not that good. Too much flickering…

The tool I user nowadays is LiveReload. It’s a paid application on OSX that monitors a list or folders. On any change on any file in any of these folders, the current Chrome window is refreshed.

So simple, yet so powerful.

Whatever way you use to edit files, it works. That means it’s compatible with any IDE. It works on any browser, either through a plugin or by inserting a specific javascript snippet.

There are lots of open source tools doing the same kind of work. This one fits me better. It starts on login, has a simple GUI, works well. It’s worth its small price. Your mileage may vary.