JavaScript課程的Chrome Workspace工作環境設定

在上課中，我們統一採用Chrome Workspace作為程式練習的編輯工作環境，以利課程進行。以下是工作環境設定步驟：

1. 下載exercise.zip至桌面或工作目錄，並解開exercise.zip。

2. 將exercise目錄下的work.html檔案拖放到Chrome瀏覽器。

3. 打開Chrome的Developer Tools，Mac快速鍵：Command+Shift+C；Windows快速鍵：Ctrl+Shift+C或F12。

4. 將本地目錄加進Chrome Workspace：

   1. 切換到Developer Tools的「Sources」面板。（如下圖）
   2. 在「file://」附近按滑鼠右鍵，點選「Add Folder to Workspace」。
   3. 將work.html檔案所在的目錄exercise加進Chrome Workspace。
   4. 若Chrome提示是否允許DevTools存取該目錄，選擇「允許」。

   
   (Screenshot by Arthur Liao@flickr)

5. 將檔案work.js指向網路資源：

   1. 點開剛才加進Chrome Workspace的目錄exercise。（如下圖）
   2. 在work.js上按滑鼠右鍵，點選「Map to Network Resource...」。
   3. 選擇work.js的檔案路徑，以完成網路資源指定。

   
   (Screenshot by Arthur Liao@flickr)

6. 將Chrome Workspace編輯器的預設縮排設定為2格：

   1. 按右上角的設定圖示「⋮」，選擇「Settings」。
   2. 將「Sources」的「Default Indentation」選項設定為「2 spaces」。

7. 安裝Chrome插件LivePage，安裝後對work.html頁面enable此插件（按一下LivePage插件按鈕，按鈕會出現紅色Live字樣）。以後只要一儲存work.html或work.js檔案的變更，Chrome就會自動重新載入此頁面。