相信網頁設計師並不陌生 Chrome DevTools，善用 DevTools 可以減少很多 Debug 時間，今天來介紹如何在 Chrome 瀏覽器上直接編輯程式，並且存檔，重新整理網頁後便可看到結果。聽到這裡大家一定會很好奇，不就開系統編輯器 (sublime, pspad, vim …) 工具，直接修改 => 存檔 => 重新整理嘛？但是這並不稀奇阿，重點是 Chrome 瀏覽器可以直接支援線上編輯檔案，而不是透過系統工具做編輯。這就是 Chrome 強大的地方，今天就來介紹 Chrome workspace。
啟動 Workspace
打開 Chrome 瀏覽器，在網址列輸入: chrome://flags/，並且找到 Enable Developer Tools experiments，啟動此選項，最後重新啟動瀏覽器
打開 Chrome Console 介面，並且點選右下角 Setting 會看到此畫面
點選到 Experiment 後，將 File system folders in Source Panel 勾選，並且重新啟動瀏覽器
使 Workspace 編輯檔案
完成上述步驟，接著就是將 local 目錄掛到 Chrome Dev Tool 介面，請先打開瀏覽器，打 local 網址，並且將 console 介面打開
指定好 path 後，可以將 setting 頁面關閉，然後切換到 Sources Tab，你會發現如下圖
我們可以開啟 app/index.html，直接在 console 介面編輯並且存檔
接著直接 refresh 網頁即可。
心得
用 workspace 其實重點就是你可以直接開 browser 然後旁邊的 console 介面可以直接編輯，而不是切換到系統編輯器修改，當然這還不是很方便，如果搭配了 GruntJS 及 LiveReload，你會發現，編輯程式碼後，Grunt 也是會自動跑相關設定，LiveReload 也會自動幫忙更新網頁喔。
可以參考之前的文章: 2013 Javascript Conference: 你不可不知的前端開發工具
另外可以直接拿下面兩專案來跑 RequireJS + Backbone.js + GruntJS
Github: html5-template-engine
Github: backbone-template-engine