Coding on workspace of Chrome Developer tools

Google Chrome

相信網頁設計師並不陌生 Chrome DevTools,善用 DevTools 可以減少很多 Debug 時間,今天來介紹如何在 Chrome 瀏覽器上直接編輯程式,並且存檔,重新整理網頁後便可看到結果。聽到這裡大家一定會很好奇,不就開系統編輯器 (sublime, pspad, vim …) 工具,直接修改 => 存檔 => 重新整理嘛?但是這並不稀奇阿,重點是 Chrome 瀏覽器可以直接支援 線上編輯檔案,而不是透過系統工具做編輯。這就是 Chrome 強大的地方,今天就來介紹 Chrome workspace

啟動 Workspace

打開 Chrome 瀏覽器,在網址列輸入: chrome://flags/,並且找到 Enable Developer Tools experiments,啟動此選項,最後重新啟動瀏覽器

Selection_004

打開 Chrome Console 介面,並且點選右下角 Setting 會看到此畫面

Selection_005

點選到 Experiment 後,將 File system folders in Source Panel 勾選,並且重新啟動瀏覽器

使 Workspace 編輯檔案

完成上述步驟,接著就是將 local 目錄掛到 Chrome Dev Tool 介面,請先打開瀏覽器,打 local 網址,並且將 console 介面打開

Selection_006

指定好 path 後,可以將 setting 頁面關閉,然後切換到 Sources Tab,你會發現如下圖

Selection_007

我們可以開啟 app/index.html,直接在 console 介面編輯並且存檔

Selection_008

接著直接 refresh 網頁即可。

心得

Workspace 其實重點就是你可以直接開 browser 然後旁邊的 console 介面可以直接編輯,而不是切換到系統編輯器修改,當然這還不是很方便,如果搭配了 GruntJSLiveReload,你會發現,編輯程式碼後,Grunt 也是會自動跑相關設定,LiveReload 也會自動幫忙更新網頁喔。

可以參考之前的文章: 2013 Javascript Conference: 你不可不知的前端開發工具

另外可以直接拿下面兩專案來跑 RequireJS + Backbone.js + GruntJS