The Beauty of LiveReload for Web Designers and Web Developers
Have you ever hated pressing the reload button in your browser every time you make a change to your CSS, HTML, or JS files? LiveReload is the answer to our prayers! LiveReload is a program that watches the coding files you are working on to see when there are changes made, once you save the file in your code editor LiveReload automatically updates the file in the browser.
The Web Developer Wonderland
(a happy land where browsers don’t need a Refresh button) CSS edits and image changes apply live. CoffeeScript, SASS, LESS and others just work. – LiveReload.com
Where Can I Find LiveReload?
Official Site: livereload.com
Mac Download: Itunes Store ($9.99)
PC Download: Windows.exe (Pre-Alpha)
Try Guard-livereload for Linux: Download from Github
Where Can I Find LiveReload Browser Extensions?
Safari Extension: Download
Note: Be sure to enable Extensions, “How to enable extensions for Safari 5 on OS X and Windows.” You may also need to Quit Safari then Open to enable LiveReload to run properly.
Firefox Extension: Download
Chrome Extension: Download
You must allow access to file URLs to enable local files to be refreshed.
Trouble Getting the Google Chrome Exstention to Run?
- With chrome you may have to install the Chrome Exstention manually.
- Right Click on the live Reload Icon in chrome, click Remove from Chrome.
- Then Go to a different browser and go to the same Chrome Extension Link, download it.
- Go to your downloads folder, click and drag the .crx file into Google Chrome OR right click on the .crx file and click open with Google Chrome.
- Be sure to allow access to file URLs (Refer to the “Where Can I Find LiveReload Browser Extensions?” section on this page ).
Video Screencast/ Totourals on Installing and Using LiveReload on a Mac
Here is a list of videos I found that give good examples of how to use LiveReload on a mac.
This screencast also gives to good tips on using Sublime Text 2.
But What about LiveReload for PC (Windows)?
LiveReload is only in the Pre-Alpha stage for Windows; however, it does work for windows.
- Download and Install the Windows version of LiveReload from LiveReload.com
- Download and Install the LiveReload Browser Exstention of your choice.
- In LiveReload, open the folder with the files you want LiveReload to refresh.
- Click the LiveReload button on the webpage you are working on (the file should be in the folder/folders that you selected in the previous step).
Note: You may need to refresh your browser window if it does not refresh once you save the file in your text editor.NUMBER 4: You must click the plugin button for the plugin to be active. There is a RED dot notifying you that the plugin is active.
Now all you have to do is Press “Save” in you text editor and all your changes will dynamically change in your browser window without having to press the refresh button! Great Huh?
I find this program very helpful in my everyday web design/development tasks. That one extra step (not having to press the SAVE button in my browser) goes along way.
Thoughts for Discussion
- What do you like or don’t like about LiveReload?
- Is there other program options out there that do the same thing as LiveReload?