開始時，右鍵點擊 HTML 檔案

使用此教學學習如何在 Visual Studio Code 檔案總管中右鍵點擊 .htmlDemo To Do 檔案來開啟與關閉 DevTools，無需運行網頁伺服器。

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

1. 如果你還沒做過，請先在 Install the DevTools 擴充套件 for Visual Studio Code 中執行步驟，然後繼續往下走。 你不需要安裝並啟動網頁伺服器來進行目前的教學，但建議這麼做。

步驟 2：透過右鍵點擊 HTML 檔案啟動 DevTools

在 Visual Studio Code 的檔案總管中右鍵點擊.html檔案，是當你的網頁不需要在網頁伺服器上運行時，開啟 DevTools 的主要方式。

• 與 啟動實例 按鈕不同，此方式會以除錯模式開啟 DevTools。

• 與我們稍後會使用的 啟動專案 按鈕不同，這種方式不需要你產生 launch.json 檔案。

我們將透過開啟 示範式 網頁應用程式來示範：

1. 在 Visual Studio Code 中，選擇「檔案>開啟資料夾」。

2. 到你複製 Demos 倉庫的目錄，打開 demo-to-do 應用程式的專屬目錄， C:\Users\username\Documents\GitHub\Demos\demo-to-do\例如，然後點擊 「選擇資料夾 」按鈕：

   

3. 選擇 活動欄>的總管 () > 右鍵點擊 index.html ，然後選擇 「用 Edge>開啟」 用 DevTools 開啟瀏覽器：

   

   • Edge DevTools 標籤頁會打開。

   • Edge DevTools： 瀏覽器 分頁打開，顯示你右鍵點擊的網頁。

   • Visual Studio Code 的除錯工具列會打開，除錯主控台會在底部開啟，執行面板也會開啟。 這些功能表示 Visual Studio Code 處於除錯模式：

   

步驟三：排列分頁

為了節省空間，請使用 關閉 DevTools 或 開啟 DevTools 按鈕，以及 切換螢幕投播 按鈕 (切換 DevTools 分頁) 開啟或關閉。

1. 在 Edge DevTools 分頁左上角，點擊「 切換螢幕投播 」按鈕：

   

   Edge DevTools：瀏覽器分頁關閉。

2. 在 Edge DevTools 標籤中，再次點擊切換 螢幕投播 按鈕。

   Edge DevTools：瀏覽器 分頁打開。

3. 在 Edge DevTools： Browser 標籤的右上角，點擊 「關閉 DevTools 」按鈕：

   

4. 在 Edge DevTools： Browser 標籤的右上角，點擊 「開啟 DevTools 」按鈕。

5. 拖曳 Edge DevTools： 瀏覽器分頁，可以將它移到 Visual Studio Code 的任何位置，例如與原始碼編輯器分組。

步驟 4：在 DevTools 編輯 CSS，自動更新 .css 檔案

在 Edge DevTools 標籤的 Elements 工具 >樣式 標籤中，你可以編輯 CSS 選擇器、規則和數值。 預設會勾選 CSS 鏡像編輯 勾選框，這樣 .css 檔案會自動被編輯，但編輯內容不會被儲存，這樣你可以決定是否要儲存這些變更。

1. 在 元素 工具的樣 式 標籤中，點擊 CSS 值，例如正體字型大小。

2. 更改 CSS 值，例如使用滑鼠滾輪或按下 上箭頭 和 向下箭頭。 相關 .css 檔案會開啟，例如 to-do-styles.css ，並捲動到定義 CSS 值的行，並自動編輯 .css 檔案，但不會儲存變更：

   

3. 關閉 .css 檔案。 Visual Studio Code 會提示你是否要儲存變更。

4. 點擊「不儲存」按鈕。

步驟 5：在除錯器中逐步執行 JavaScript 程式碼

1. 在活動欄) 中選擇 活動欄> 的總管 ( 。

2. 在 demo-to-do 目錄中，點擊 to-do.js 開啟。 往下滑到函式， changeTask 然後點擊行號左側以設定斷點：

   

3. 如果沒有顯示執行 與除錯 側邊欄，請選擇 檢視>執行。 執行與除錯側欄包含觀察窗格及其他除錯器面板。

4. 在 Edge DevTools： Browser 標籤中呈現的示範應用程式中，輸入任務，例如 test。 Visual Studio Code 的除錯器會在檔案的to-do.js斷點處暫停：

   

5. 在除錯工具列中，或使用執行選單，或按鍵，在 中逐步執行幾行程式碼。to-do.js

6. 在 Edge DevTools： Browser 標籤中呈現的示範應用程式中，點擊測試任務旁的「完成」圓圈。 Visual Studio Code 的除錯器會在檔案的to-do.js中斷點暫停。

步驟 6：關閉 DevTools

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

1. 在除錯工具列中，點擊 停止 (Shift+F5) 按鈕。 或者，在 執行 選單中，選擇 停止除錯：

   

   Edge DevTools 分頁關閉，Edge DevTools： 瀏覽器分頁也關閉。

另請參閱:

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

你已經完成了教學「右鍵點擊 HTML 檔案開始」。 建議你也做其他教學;請參考使用 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