Alternative to LiveReload – Automatically Refresh Browser Upon File Change For Free

2

LiveReload is one of the most popular development tools out there that helps you, as a web developer, to auto refresh or reload the browser when file changes are made in a  directory you specified. LiveReload, costs $9.99 for Mac, is free on Windows. However, it comes with a catch. It doesn’t always work. Often times, you will find it crashes far more than you actually need it to reload the browser manually.

If your main development browser is Chrome, you can configure auto reload without additional third party tools

A while ago, chrome introduced a new way to debug your web app. Remote debugging, allows you to debug an app remotely. In this case, we are going to use Sublime Text 2 / 3 to remote debug in chrome. One of the packages that enables this feature also comes with a handy feature that is the ability to auto reload upon changes. Hence, if you are using Sublime Text as your text editor, and chrome as your browser, then there is no need for you to use any additional tools to help you reload the browser.

Here is the setup in order to make it work.

First you need to install package control into Sublime Text, if you haven’t done so you can easily find out if the following command shows you the screenshot below. Just press Ctrl + Shift + P and type package control. If you can see the package control listed below, then you are good to go.

2013 11 19 1505 thumb - Alternative to LiveReload - Automatically Refresh Browser Upon File Change For Free

After entering “Package Install” press enter, then type “Web Inspector”. You will see top two results are Web Inspector and Web Inspector 3. Depends on which version of Sublime Text you are using select the one accordingly. Use Web Inspector for Sublime Text 2. In our case, we have already installed, so the package will not show in the list.

2013 11 20 0843 thumb - Alternative to LiveReload - Automatically Refresh Browser Upon File Change For Free

2013 11 19 1333 thumb - Alternative to LiveReload - Automatically Refresh Browser Upon File Change For Free

Once you have the package installed, go to Preferences > Package Settings > Web Inspector > Settings – Default.

Update the windows’s chrome path like below.

"chrome_path": {
"osx": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
"windows" : "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
"linux": "/usr/bin/google-chrome"
}

2013 11 20 0849 thumb - Alternative to LiveReload - Automatically Refresh Browser Upon File Change For Free

Update chrome’s target flag to add remotedebugging-port=9222 at the end of the target line.

2013 11 19 1332 thumb - Alternative to LiveReload - Automatically Refresh Browser Upon File Change For Free

Press Ctrl + Shift + R to launch remote debugging command. Press enter when you see “Start Google Chrome with remote debug port 9222”

This will launch a chrome, and you will have the ability to select which tab you’d like to hook the remote debugger on. Press Ctrl + Shift + R again, you will see the “Start debugging” option. From there on, any change you’ve made in the sublime text, the browser will auto refresh upon file saving.

2013 11 18 0251 thumb - Alternative to LiveReload - Automatically Refresh Browser Upon File Change For Free

This approach is pretty reliable compare to LiveReload. Give it a try and you might find it useful !

2 COMMENTS

  1. I got an error of The system cannot find the file specified please whats wrong? I have done again the process several times but still error persist

  2. What do you mean by changing chrome’s path?
    Which path should i change?
    Please help me. I cant make live reload work.
    It connects successfully but doesnt work.
    so i need an alternative way.

LEAVE A REPLY

Please enter your comment!
Please enter your name here