點擊啟動實例按鈕即可開始

利用這個教學學習如何點擊 啟動實例 按鈕來開啟和關閉 DevTools，來嘗試使用示範 版的成功 頁面。 這種做法會開啟預設的成功網頁來編輯，讓你可以練習並開始使用 DevTools。 這種做法在使用者介面中很明顯，並且會在非除錯模式下開啟 DevTools 分頁。

這種開啟 DevTools 的方法適用於以下簡單情境：

• 如果你想嘗試用 DevTools 編輯預設的成功頁面，

• 如果你想檢查一個用 URL 指定的頁面，且不需要除錯模式， 要開啟不同的網頁，你可以在網址列貼上網址或檔案路徑。

• 如果你沒有開啟資料夾，想嘗試在使用 URL 指定的頁面上更改 CSS，而不使用本地原始碼檔案。

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

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

步驟 2：點擊啟動實例按鈕

1. 在 Visual Studio Code 中，選擇「新視窗檔案>」。 一開始，沒有開啟任何資料夾。

2. 在 活動欄中，點擊 Edge 工具Microsoft () 。 Microsoft Edge 工具側邊欄會開啟：

   

3. 點擊 啟動實例 按鈕。 Edge DevTools 標籤打開，Edge DevTools： 瀏覽器 標籤也打開，顯示預設的成功頁面：

   

   成功頁面的原始檔案是你硬碟目錄中自包含 .html 的檔案。 這是一個包含 CSS 規則 (元素 <style>) 的單一.html檔案。 它也包含一個 JavaScript console 陳述 (元素 <script>) 。

   在 DevTools 瀏覽器的地址列中，有一個 file:/// 路徑 (，而非 URL) ，例如 file:///C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.html。

   除錯工具列打不開，除 錯主控台 也打不開，執行 和除錯 側邊欄（帶 觀察 面板）也打不開。 這表示 Visual Studio Code 並非處於除錯模式。

   你可以修改本地檔案的 CSS，也可以在地址列輸入本地檔案路徑或 localhost 網址，並與本地網頁互動。

步驟三：打開資料夾，確保允許編輯

請注意，Visual Studio Code 中沒有開啟任何資料夾。 在許多情況下，若要使用 DevTools 編輯網頁，而非僅僅檢查網頁，你必須打開包含與顯示網頁相符原始碼檔案的資料夾。 打開資料夾提供了最大的彈性，你可以在 Edge DevTools： Browser 分頁的地址列中開啟 URL 或檔案路徑，並擁有完整的 DevTools 功能。

打開資料夾可以讓你信任該資料夾，這樣當你嘗試更改原始檔案時就不會跳出錯誤訊息。 否則你可能會收到錯誤訊息，因為包含成功頁面的資料夾不被信任，而 CSS 鏡像編輯嘗試編輯該資料夾裡 index.html 的原始檔案中的 CSS。

1. 在 Edge DevTools： Browser 標籤的地址列中，選擇並複製檔案路徑，但不要複製檔名，例如 C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/。

2. 在 活動欄>總管中，點擊 「開啟資料夾 」按鈕。 在 開啟資料夾 對話框中，貼上或選擇你複製的路徑。 要貼上，在 Windows 上，你可能需要在整個路徑中更改/為 。\ 然後點擊 「選擇資料夾 」按鈕。

   第一次打開資料夾時，必須確認你信任該資料夾中檔案的作者：

   

3. 點擊 「是，我相信作者 」按鈕。

   你可能需要重新啟動 DevTools，方法如下：

1. 在 活動欄中，點擊 Microsoft Edge Tools () 。 Microsoft Edge 工具側邊欄開啟。

2. 點擊 啟動實例 按鈕。 Edge DevTools 標籤打開，Edge DevTools： 瀏覽器 標籤也隨之開啟，顯示預設的成功頁面。

步驟 4：編輯 CSS

1. 在 Edge DevTools 標籤中，點擊頁面 中的「選取元素」檢查它 ， (檢查 ) 按鈕，有時也稱為 檢查 按鈕。

2. 在 Edge DevTools：瀏覽器 分頁中，將滑鼠移到頁面的不同部分，同時觀看 Elements 工具的 DOM 樹展開並更新。

3. 點擊 「成功！ 」標題，這是一個 <h2> 元素。

4. 在 Edge DevTools 標籤的元素工具「樣式」標籤中，非斜體 h2 宣告區塊，點擊規則右側margin-bottom。

5. 輸入一個新的 CSS 規則， font-size: 5em然後按下 Enter。 拼法與下方 user agent 樣式表中斜體 h2 部分所示的規則相似。

   index.html 開啟後，會被 CSS 鏡像編輯自動編輯以新增該行 font-size: 5em;。 往下捲到那行，在 h2 部分。

步驟五：安排分頁

1. 在 Edge DevTools 標籤的非斜體 h2 區塊，點選 font-size 你輸入的 CSS 規則，然後按下 上箭頭 和 下箭頭。 該 index.html 值會自動編輯，透過 CSS 鏡像編輯。

2. 在 Edge DevTools 標籤中，點擊幾次切換 螢幕播 報按鈕。 Edge DevTools：瀏覽器分頁可以開啟和關閉，節省空間。

3. 在 Edge DevTools：瀏覽器 標籤中，點擊「 關閉 DevTools 或 開啟 DevTools 」按鈕幾次。 另一個 DevTools 分頁會自動開啟和關閉，節省空間。

4. 在 Visual Studio Code 的頂部，右鍵點擊分頁，並排列它們以同時顯示各個分頁：

   • 側邊欄，顯示 Microsoft Edge Tools>的目標。
   • 編輯。index.html
   • Edge DevTools 標籤。
   • Edge DevTools：瀏覽器標籤。

   

步驟 6：檢視 JavaScript

1. 在 Edge DevTools 標籤中，點選 控制台 工具的標籤。 index.html 包含 <script> 一個包含 JavaScript 陳述句的元素，該語 console.info('Hello from the startpage!')句輸出「Hello from the startpage！」

步驟7：使用地址列開啟另一個 .html 檔案

透過在 Edge DevTools： Browser 分頁的地址列輸入檔案路徑，啟動 實例 按鈕也可用來開啟其他 .html 檔案，而非成功頁面。 我們下面會示範這點。 然而，在檔案總管中右鍵點擊.html檔案是開啟.html除成功網頁以外的檔案的主要方式，而工具則是在除錯模式中開啟。

1. 在Visual Studio Code中，選擇>檔案開啟資料夾 (或開啟最近) 。 打開 \Demos\demo-to-do\ 你複製的 Demos 倉庫資料夾，例如 C:\Users\username\Documents\GitHub\Demos\demo-to-do\。

2. 如果被提示，請點擊 「是，我相信作者」 按鈕。 除了能提供信任外， 啟動實例 方法其實不需要打開資料夾，只要你在 DevTools 瀏覽器中指定檔案路徑而非 URL。

3. 如果 Edge DevTools 分頁還沒開啟，在 活動欄中點選 Edge 工具Microsoft) ，然後點擊 啟動實例 按鈕：

   

4. 在 活動欄中，選擇 檔案總管，然後右鍵點擊 \demo-to-do\index.html>複製路徑。

5. 在 Visual Studio Code 中，Edge DevTools：瀏覽器標籤的地址列，貼上你在上面取得的本地檔案路徑，例如 C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html。 示範 待辦 應用程式打開了。 在地址列中， file:/// 會加上前綴，Windows) (反斜線改為正斜線;例如： file:///C:/Users/username/Documents/GitHub/Demos/demo-to-do/index.html。

6. 在示範應用程式中，輸入任務，例如 測試。

7. 在 元素 工具的 樣式 分頁中，更改 CSS 值，例如：點選點大小 body { font-size: 11pt;} ，然後更改值。 你打開資料夾中的對應 .css 檔案會開啟，並自動編輯以符合你在 樣式 標籤所做的修改，但 (不會儲存) 。

步驟八：使用地址列開啟網址

啟動 實例 按鈕產生的地址列可用來在伺服器上開啟網址。 然而，啟動 專案 按鈕以及儲存在 launch.json中的 是開啟網頁的主要方式，透過指定網址，工具則以除錯模式開啟。

1. 如果你的 localhost 伺服器正在運行，請貼上 localhost 網址，例如 http://localhost:8080。 或者，貼上 github.io 伺服器網址， https://microsoftedge.github.io/Demos/demo-to-do/。

   如果你想用 CSS 鏡像編輯來編輯原始檔案，你需要在 Visual Studio Code 裡開啟資料夾;否則，請在 Edge DevTools 標籤的 Elements 工具中，在樣式標籤中清除 CSS 鏡像編輯的勾選框。清除勾選框可以避免在你嘗試在 DevTools 中更改 CSS 且尚未提供開發工具。

2. 在示範應用程式中，輸入任務，例如 測試。

3. 在 元素 工具的 樣式 分頁中，更改 CSS 值，例如：點選點大小 body { font-size: 11pt;} ，然後更改值。 你打開資料夾中的對應 .css 檔案會開啟，並自動編輯以符合你在 樣式 標籤所做的修改，但 (不會儲存) 。

步驟 9：關閉 DevTools

1. 在 Edge 開發工具標籤中點擊關閉 (x) ，以及在 Edge 開發工具：瀏覽器標籤中（如果這些標籤已開啟）。

2. 選擇 活動欄>Microsoft Edge Tools。 如果 目標區 塊有列出任何目標，請將滑鼠移到目標實例的右側，然後點擊關閉 實例 (x) 。 會顯示啟動 實例 按鈕，表示所有 DevTools 實例都已關閉。

   

   請注意，在上面的截圖中，Visual Studio Code 並未進入除錯模式;例如，沒有除錯工具列。 如果有除錯工具列，你可以點擊 停止 按鈕關閉 DevTools。

3. 關閉 index.html 時不儲存變更。

4. 選擇>「檔案關閉資料夾」。

另請參閱:

• 在開啟 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