WP Live.js

by | Jul 25, 2014 | WordPress

Live.js is a javascript script which brings us closer to “designing in the browser“. What live.js actually does, and I quote from its website, is:

…monitor the current page including local CSS and Javascript by sending consecutive HEAD requests to the server. Changes to CSS will be applied dynamically and HTML or Javascript changes will reload the page…

Simply put:

  1. Include live.js file from <head> tag
  2. Make change(s) to your .css or .js files
  3. The browser will automatically refresh itself whenever you do step no.2

I have to admit that using live.js is incredibly useful when you’re writing CSS. No need to save file + change window from editor to browser + refresh + and wait until the browser reload the file. What you need to do are save the file, and see the change on the browser.

For quite long time, I use Michael Martin of Pro Blog Design’s live.js plugin to include live.js whenever I write CSS for WordPress themes I develop. However, as soon as I start tweaking Javascript and watching browser console to see the javascript logs I realize that all I see is live.js request to detect changes to page assets:

livejsonconsole

It would be really nice to be able to toggle on/off live.js insertion to <head> tag easily. Hence, I write WP Live.js. A simple plugin that enables you to:

  1. Adding live.js into your <head> tag
  2. Enable you to toggle live.js addition to <head> tag by simply clicking a menu on admin bar.

Here’s how it looks:

WP Live.js On Admin Bar

 

Simple, isn’t it? You can download WP Live.js plugin on GitHub.