安裝 Visual Studio Code 的 DevTools 擴充功能

本文將帶你了解 DevTools 擴充功能的初始設定過程。 安裝 DevTools 後，你就可以依照使用 Visual Studio Code DevTools 擴充套件開始的步驟操作。

這篇文章能幫助你：

• 安裝 DevTools 擴充功能。

• 複製了 Demos 倉庫，其中包含了 demo-to-do 網頁應用程式。

• 先建立一台網頁伺服器，這樣你就能在 Visual Studio Code 的 DevTools 擴充功能中使用 localhost 的網址。

步驟 1：安裝 Visual Studio Code

1. 如果還沒做，請在另一個視窗或分頁中，選擇下載 Visual Studio Code，然後下載並安裝 Visual Studio Code。

步驟 2：安裝 Microsoft Edge

開發 Visual Studio Code 的 DevTools 擴充功能是必須的 Microsoft Edge。

在 Windows 上，安裝了 Microsoft Edge。 在 macOS 或 Linux 上，請依照以下方式安裝 Microsoft Edge：

1. 請前往 Edge 頁面 Microsoft.com。

步驟 3：安裝 Microsoft Edge DevTools 擴充功能

安裝 Microsoft Edge DevTools 擴充套件（適用於 Visual Studio Code），步驟如下：

1. 開啟 Visual Studio Code。

2. 在左側 活動列 ，點擊擴充 功能 () 按鈕。 或者，在 Windows/Linux 按 Ctrl+Shift+X ，或在 macOS 按 Command+Shift+X 。 擴展市場視窗打開。

3. 在 「市集搜尋擴充功能 」文字框中，輸入 Microsoft Edge Tools for VS Code。

4. 選擇 Microsoft Edge Tools for VS Code，然後點擊 安裝 按鈕：

   

作為替代方法，你可以使用瀏覽器從 Visual Studio Marketplace 網站下載 Microsoft Edge DevTools 擴充功能。 請前往 Microsoft Edge 開發者工具，支援 Visual Studio Code。

步驟 4：安裝 Node.js 和 Node 套件管理器 (npm)

若要即時 () 分析程式碼，指出問題（如波浪線底線）並提供快速修復，您必須安裝 Node.js 和 Node Package Manager (npm) 。

DevTools 擴充功能會跳出一個建議，建議安裝 Node.js 和 npm。 建議文字類似：「安裝 Node.js & npm？ (建議是因為你安裝了這個擴充功能) 」。

1. 如果跳出視窗打開，點擊連結。

2. 從 Node.js> Downloads > LTS 安裝 Node.js 和 npm， (長期穩定的) (或目前) 。

   在 Windows 上，會下載一個 .msi 檔案，例如： node-v18.17.1-x64.msi

3. 在瀏覽器的「下載」面板中，點選「 顯示在資料夾中」，然後執行下載的檔案。 Node.js 設定精靈會打開。 點擊 「下一步 」按鈕，然後依照提示操作。 你可以使用預設選項。

4. 確認 Node.js 和 npm 已安裝，如下：在 Visual Studio Code 中選擇「檢視>終端機」。 或者，執行 git bash 應用程式。

5. 在命令提示字元輸入 npm version。 版本號顯示為 npm 和 ， node表示已安裝 Node Package Manager 與 Node.js，以支援線上及即時問題分析。 例如：

   $ npm version
   {
      npm: '10.9.2',
      node: '22.14.0',
      ...
   }
   

另請參閱:

• 線上與即時議題分析

步驟五：複製 Demos 倉庫

複製 Demos 倉庫是可選的。 Demos 倉庫對於遵循各種 DevTools 文件很有幫助。 如果你願意，可以不複製倉庫，而是打開已有的專案目錄（如果你有的話）。

另一個選擇是，與其複製整個目錄，不如只下載 示範待辦 目錄。 例如，前往 https://download-directory.github.io/ 並貼上網址 https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do。 檔案 .zip 會被放入你的下載目錄。 將這些網頁原始檔案解壓縮到合適的位置。 教學《使用 DevTools 擴充套件 for Visual Studio Code 開始》中使用了範例位置：

C:\Users\username\Documents\GitHub\Demos\demo-to-do\

要複製 Demos 倉庫，使用本教學的 示範 to-do 範例：

1. 前往 MicrosoftEdge/Demos 倉庫。

2. 如果綠色的程式碼按鈕沒有顯示，請點擊左上角路徑中的 Microsoft Edge / Demos 中的 Demos，即可前往倉庫的主頁。

3. 點擊綠色 代碼 按鈕，然後選擇 複製 按鈕。 本文假設你使用的是 Visual Studio Code 中的原始碼控制功能。 或者，如果你確定想用其他方法，也可以使用其他提供的方法：

   • 使用 GitHub Desktop 開啟
   • 以 Visual Studio 開啟
   • 下載 ZIP

   

4. 在Visual Studio Code，在活動欄中點選「來源控制」) 按鈕，然後點擊「複製儲存庫」按鈕。

5. 在 「提供儲存庫 URL 」文字框中，貼上複製的 URL： https://github.com/MicrosoftEdge/Demos.git ，然後按下 Enter。 會跳出資料夾選擇對話框。

   

6. 請導覽到你想要的路徑，例如 C:\Users\username\Documents\GitHub 或 Users/username/GitHub，然後點擊 「選擇儲存庫位置 」按鈕。

7. 會出現「 複製 git 倉庫 」的訊息，接著會提示你打開複製的倉庫。 點擊 開啟 按鈕：

   

8. 如果被問到 「你信任嗎...」，請點擊 「是」 按鈕。 或者，點擊 「不」 按鈕，繼續閱讀本攻略的大部分部分。

   Explorer 樹列了許多示範，包括 demo-to-do。

9. 在 Visual Studio Code 中，選擇「關閉檔案>資料夾」。

10. 在 活動欄中，點擊 Microsoft邊緣工具 () 按鈕。 Microsoft Edge 工具面板打開。

11. 在 Microsoft Edge 工具>的目標 面板中，點擊 「開啟資料夾 」按鈕。 開啟 資料夾 對話框。 進入 demo-to-do 你複製的 Demo 倉庫資料夾，選取該資料夾或進入該資料夾，然後點擊 「選擇資料夾 」按鈕：

    

    上圖展示了一個已複製 Demos 倉庫的倉庫位置範例。 demo-to-do複製的 Demos 倉庫資料夾在 Visual Studio Code 的檔案總管中開啟，但目前還沒有launch.json檔案存在：

    

步驟 6：設置 localhost 伺服器

如果你安裝了 Node.js 和 npm，如上所述， npx http-server 是啟動本地網頁伺服器的簡單方法。 您可以直接跳到以下步驟，或先閱讀這些背景資訊。

很多時候，你不需要輸入網址或運行 localhost 伺服器。 例如，您可以：

• 打開一個包含網頁原始檔案的資料夾，然後右鍵點擊檔案。.html
• 在地址列輸入本地檔案路徑，例如 C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html (預設的成功頁面) 。
• 在 Edge DevTools： Browser 標籤的地址列輸入遠端伺服器 URL，例如 https://microsoftedge.github.io/Demos/demo-to-do/。

如果你的網頁使用某些 API 需要網頁在網頁伺服器上運行，使用 DevTools 時，你必須啟動本地網頁伺服器來測試。 如果你不是把專案放在網頁伺服器上，而是只用本地檔案，你仍然可以透過右鍵點擊本地 .html 檔案使用 DevTools，並且具備除錯功能。 你的應用程式中必須安裝在伺服器上的功能將無法運作，DevTools 的實用性也會有限。

關於 http-server 的資訊，請參見 http-server：一個簡單的靜態 HTTP 伺服器。

設置 http-server

1. 在 Visual Studio Code 中，選擇「檔案>開啟資料夾>」，打開包含 .html、 .css、 及.js網頁檔案的目錄，例如 C:\Users\username\Documents\GitHub\Demos\demo-to-do\。

   在上述範例路徑中：

   • \Documents\GitHub\ 是 Demos 倉庫被複製到的地方。
   • \Demos\ 是 Microsoft Edge 開發者文件中用作範例的 GitHub 倉庫。
   • \demo-to-do\ 是倉庫中的範例目錄之一。

2. 在 Visual Studio Code 中，選擇「檢視>終端機」。 或者，為了讓網頁伺服器無論 Visual Studio 狀態如何都能持續運作，可以在 Visual Studio Code 之外開啟命令提示字元，例如 git bash。

3. cd 放到你想用 HTTP 提供的資料夾裡。

   在 git bash shell 中，使用前斜線，例如：

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

   或者，如果你在 Windows 上使用不同的命令提示字元，可以使用反斜線，例如：

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

請繼續往下看。

啟動伺服器 (npx http-server)

這些步驟會首次啟動伺服器。

1. 輸入指令 npx http-server：

   npx http-server
   

   本地網頁伺服器從 8080 埠開始。

   你可能會收到類似這樣的訊息：

   Need to install the following packages:
     http-server@14.1.1
   Ok to proceed? (y)
   

   或者，如果你 沒有這樣的檔案或目錄，你可以先執行： npm install --global http-server 然後再執行： http-server

2. 這時， y。

   Windows 會提示是否允許 Node 在網路上通訊：

   

3. 選擇 「私人網路 」勾選框，然後點擊 「允許存取 」按鈕。

   會顯示關於伺服器及 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

   

接著，請參考 Visual Studio Code 的 DevTools 擴充功能開始使用。

另請參閱

• 開始使用 Visual Studio Code 的 DevTools 擴充功能
• 開啟 DevTools 與 DevTools 瀏覽器
• Microsoft Edge DevTools 擴充套件 for Visual Studio Code
• DevTools 範例程式碼
• 複製倉庫 - GitHub 文件。