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.

LiveReload - Enable Chrome Extension

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 ).

Source

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.

Sublime Text Workflow that Beats Coda and Espresso

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?

Personal Thoughts

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?
Help Others by Sharing!
Receive Updates

No spam guarantee.

Brian Jackson

Brian Jackson

Owner/Director of Optimization at OKay Marketing
SEO, AdWords, Social Media, Email Marketing, and WordPress Expert. It's all about conversions folks. “Some people dream of great accomplishments, while others stay awake and do them.”
Brian Jackson

@brianleejackson

Owner/Director of Optimization @okay_marketing and blogger @glutenfreealt. #SEO, #PPC, #Social Media, and #WordPress Expert. Active member on @RiseForums
Recommended WordPress Ping List for 2014 - http://t.co/CUjpBduwHr #WordPress #Ping - 2 hours ago
Brian Jackson
Share with your friends










Submit