點擊啟動專案按鈕即可開始

利用這個教學學習如何點擊 啟動專案 按鈕開啟和關閉 DevTools，並在本地主機網頁伺服器上執行 Demo To Do ，並將網頁的網址存於 launch.json。

我們將使用 示範 to-do 應用程式，示範啟動 專案 按鈕，並指向 localhost 網址，例如 http://localhost:8080。 啟動 專案 按鈕會啟動 DevTools 的除錯模式。 當你的網頁需要在網頁伺服器上運行時，這是開啟 DevTools 的主要方式。 作為初步步驟，我們會建立一個 launch.json 檔案，並編輯其中的網址，讓它指向 localhost 提供示範 的示範應用程式 。

你不一定一定要用這種方法，因為很多時候右鍵點擊 HTML 檔案就能解決問題。 然而，許多網頁使用的 API 要求網頁必須在網頁伺服器上運行，因此以下是你可以遵循的具體步驟。

步驟 1：安裝 DevTools 及前置條件

1. 如果你還沒做過，請先在 Install the DevTools 擴充套件 for Visual Studio Code 中執行步驟，然後繼續往下走。

步驟 2：啟動網頁伺服器

本節是為了支持點擊 啟動專案 按鈕。

這些步驟說明如何利用跨平台的 git bash shell（git 的一部分）啟動 http-server。 雖然你可以用 Visual Studio Code >的檢視>終端機啟動伺服器，但最好是從 Visual Studio Code 以外的命令提示字元啟動伺服器，這樣即使你關閉再重新開啟 Visual Studio Code 或資料夾，伺服器也能持續運作。

1. 如果你還沒嘗試，請首次架設並啟動網頁伺服器，從 Demos 倉庫提供示範 待辦 應用程式。 要做到這點，請參考安裝 Visual Studio Code DevTools 擴充套件中的第 6 步：設置本地主機伺服器。

2. 打開 git bash，或是其他命令提示字元。 例如在 Windows 上，按下 開始 鍵，然後輸入 git bash。

3. cd 將 http 傳送到你想要提供的特定資料夾中， Demos\demo-to-do\：

   在 git bash 裡，檔案路徑可以用斜線標示。 例如：

   cd C:/Users/username/Documents/GitHub/Demos/demo-to-do
   

4. 輸入指令 npx http-server。 本地網頁伺服器從 8080 埠開始。

   npx http-server
   

   

   會顯示關於伺服器及 localhost URL 的資訊，例如：

   Starting up http-server, serving ./
   
   Available on:
   http://10.0.1.8:8080
   http://127.0.0.1:8080
   Hit CTRL-C to stop the server
   

   顯示的網址通常等同於通用標準網址。 http://localhost:8080

步驟三：設置launch.json

本節是為了支持點擊 啟動專案 按鈕。

1. 在 Visual Studio Code 中，選擇「檔案>開啟資料夾」。 選擇包含 index.html Demos 倉庫中複製的 demo-to-do 範例的專案目錄，例如 C:\Users\username\Documents\GitHub\Demos\demo-to-do\。

   

   就像倉庫的 demo-to-do 資料夾一樣，一開始沒有資料夾，也沒有.vscodelaunch.json檔案。

2. 在 活動欄中，點擊 Edge 工具Microsoft) 。 Microsoft Edge 工具面板打開。

3. 點擊 產生launch.json 按鈕：

   

   新 launch.json 檔案打開。

4. 在檔案的 launch.json 幾個地方， "url" 每行往右捲動，並注意註解：「提供你的專案網址」：

   "url": "c:\\Users\\username\\.vscode\\extensions\\ms-edgedevtools.vscode-edge-devtools-2.1.1\\out\\startpage\\index.html", 
   // Provide your project's url to finish configuring
   

5. 在網頁瀏覽器中，前往http://localhost/伺服器上示範待辦.html檔案所在的網址，例如通用標準網址。 http://localhost:8080

6. 從地址列複製網址。

7. 在 launch.json中，每個 URL 字串中，將你複製的 示範 to do 應用程式的 URL 貼上，例如： http://localhost:8080。 將路徑貼入引號路徑字串中的其中一個 "url" 字串。 例如：

   "url": "http://localhost:8080", // Provide your project's url to finish configuring
   

8. 將修改過的網址行複製貼上到檔案的其他 launch.json 位置。

   提示：要同時修改所有實例，你可以複製更新後的 URL 字串，然後選擇初始 URL 字串中的一個實例，按 Ctrl+Shift+L 選取所有實例，最後貼上更新後的字串。

9. 存檔 launch.json 。

步驟四：點擊啟動專案按鈕

1. 在Visual Studio Code，活動欄中點選Microsoft邊緣工具) 按鈕。 Microsoft Edge 工具面板打開，現在有啟動專案按鈕，但沒有產生launch.json檔案按鈕：

   

2. 點擊 啟動專案 按鈕。

   Edge DevTools 標籤和 Edge DevTools：瀏覽器標籤分別在不同窗格開啟，展示示範可做的網頁應用程式：

   

這時你可以處理 CSS 編輯或在除錯器中逐步執行程式碼。 請參考以下教學段落：右 鍵點擊 HTML 檔案開始：

• 步驟 4：在 DevTools 編輯 CSS，自動更新 .css 檔案
• 步驟 5：在除錯器中逐步執行 JavaScript 程式碼

步驟 5：關閉 DevTools

結束除錯並關閉 Edge DevTools 分頁：

1. 在除錯工具列中，點擊 停止 (Shift+F5) 按鈕：

   

   或者在 執行 選單中，選擇 停止除錯。 或者，關閉兩個 DevTools 分頁。 除錯工具列關閉。

另請參閱:

• 在開啟 DevTools 和 DevTools 瀏覽器時關閉 DevTools。

你已經完成了「點擊啟動專案按鈕開始」的教學。 建議你也做其他教學;請參考使用 Visual Studio Code 的 DevTools 擴充套件開始。

另請參閱

• 開啟 DevTools 與 DevTools 瀏覽器
• Microsoft Edge DevTools 擴充套件 for Visual Studio Code

GitHub：

• demo-to-do - 運行於 github.io 伺服器上的示範網頁應用程式。
• demo-to-do 的原始碼
• MicrosoftEdge/Demos repo