Front End Engineer 前端設計師必備工具 Live.js

Livejs
在不久之前介紹一篇:

LiveReload 網頁程式設計師必備工具,該篇適合用在寫後端+前端的開發者,對於剛開始摸網頁的初學者可能不是很容易就上手,加上在 Windows 或 Linux 上面需要一點安裝步驟。不久之前在 IRC 頻道 #codeigniter.tw 有網友熱心提供一套好用工具 Live.js,這一套幫助您開發前端設計的部份,也就是 Javascript Html 跟 CSS,一樣讓您不用在切換視窗 Alt+TAB,只要您任何時間修改了 HTML + CSS + Javascript,視窗就會自動重新 reload,底下整理該工具特性

  • 只有支援 Html JavaScript CSS 三種格式
  • 只有支援網站 Local 檔案,也就是必須是同網域
  • 並不支援 File:// 協定,換句話說必須有 Web Server (Apache or Lighttpd or Nginx)

大家一定很想知道為什麼 Live.js 可以知道檔案更改的狀態,其實原理蠻簡單的,在 JS 每秒偵測一次全部 js html css 檔案,比對 Header 內容,只要是跟原本 Header value 有不相同,js 跟 html 會用

document.location.reload();  方式重新整理,另外 CSS 部份則是會 Remove 舊的 link,換上新的 css?now=new Date() * 1。原理大致上是如此,接著我們該如何使用它呢,非常簡單,只要把下面的 Link 直接拉到 Chrome 的 Tool Bar 即可。 use the bookmarklet! Drag the following link to your bookmarks bar: Live.js


See also