Manual all the way!

When you start out web developing, the appeal to do a lot of stuff manually might be appealing. However, once you step into intermediate to advanced level you will probably be constantly searching for tools to help automate your workflow. One such tool for me is Live Reload.

If you are wondering what this tool does. It enables you to see html changes instantly in your browser as you type. All this happens withou you needing to refresh your browser on every change to your markup. The reload is done by the tool automatically

You can probably set it up for use in various ways. One easy way I found very quick to set up is to use the chrome extension in conjunction with sublime text 2 plugin.

Setup Steps

Ok enough theory now, I will show you how to set up live reload in 5 easy steps for you environment

  1. Get and install the sublime text 2 editor here

  2. Install the live reload sublime text plugin using the package manager

Live reload sublime extension

  1. Install the live reload chrome extension using the link above. Make sure to allow it to access your url in the chrome extension settings. If you happen to not be using chrome, you can follow the instructions at that link on how to get it for other browsers.

  2. Create a new html file and load it in your browser.

  3. Enable the extension by clicking on the plugin image on your title bar. Change your html file content. Save the file and watch the changes reflect in your browser instantly in full glory (thumbs up to modern web development).

Live reload chrome extension

Verdict

If this is the first time you have come across such a tool. Go ahead and give it a try, I am very positive that you’ll never go back once you have. If not then at least you could recommend it to a friend who may find it useful

Well thats all you need to do. Hope that was helpful. If you need any help with the instructions, please let us know in the comments or you can get in touch with me. If you have anything else to add, please do let us know in the comments below.