範例「自訂開發工具工具」是 Microsoft Edge 的擴充功能，會在 Microsoft Edge DevTools 中 新增自訂工具 ，該工具在 活動欄有自己的分頁。
簡介
自訂開發工具工具在 Microsoft Edge 的開發工具中新增了 自訂 工具分頁與面板：
自訂工具會顯示記憶體資訊，並在檢查網頁與 DevTools 面板間傳送訊息。
自訂 DevTools 工具呼叫 DevTools API 來顯示記憶體資訊。
正在檢查的網頁與 自訂 開發工具工具會互相傳送訊息。
請使用本文下載、安裝並執行範例。 想了解更多範例中的程式碼，請參閱 Microsoft Edge DevTools 中新增自訂工具。
步驟一：下載範例
如果還沒完成，可以下載 Demos 倉庫的「主」分支，或複製 (，或分支並) 倉庫複製。 下載倉庫是最簡單的方法，說明如下。
下載Demos倉庫的「主」分支，如下：
在 Microsoft Edge 裡，請前往 MicrosoftEdge / Demos 倉庫。
點擊 「代碼 」按鈕中的向下箭頭，然後選擇 下載郵箱。
在 Microsoft Edge 中， 下載 對話框顯示
Demos-main.zip。 會新增「-main」，表示儲存庫「main」分支的靜態快照。將滑鼠移到右側
Demos-main.zip，然後點選「顯示在資料夾」
按鈕。檔案總管開啟，顯示下載資料夾。
右鍵點擊
Demos-main.zip，然後選擇 「全部擷取」。「 壓縮 (壓縮) 資料夾 」對話框會打開。
點擊 「擷取 」按鈕。
「 百分比完成 」對話框會打開，然後結束。
將資料夾移
Demos-main到 GitHub 倉庫的位置，例如C:\Users\localAccount\GitHub。
步驟 2：安裝擴充功能以在 DevTools 中新增該工具
在 Microsoft Edge 中，開啟一個新視窗或分頁。
選擇 設定及更多 (設定
) ，將滑鼠移到 擴充功能上，然後選擇 管理擴充功能。擴充 功能 分頁和頁面會 (
edge://extensions) 開啟。開啟 開發者模式 切換。
點選
載入解包。「 選擇擴充功能目錄 」對話框隨即開啟。
導覽到該
/Demos-main/devtools-extension資料夾，例如C:\Users\localAccount\GitHub\Demos-main\devtools-extension\，然後點擊 「選擇資料夾 」按鈕。自訂 開發工具工具 卡顯示：
步驟 3：在 DevTools 中選擇自訂工具
在 Microsoft Edge 中，進入一個網頁，例如 待辦應用程式，在新視窗或分頁中。
自訂開發工具需要網頁，而不是空白分頁。
右鍵點擊網頁，然後選擇 檢查。
DevTools 開啟。
在 DevTools 的 活動列 中，點擊 工具 分頁 (自訂
) 。自訂 工具標籤 與面板顯示：
如果 自訂 (
) 工具的分頁看不到，請執行以下任一步驟：點選 「更多工具 」
) 按鈕，然後選擇 自訂。把 DevTools 做得更寬，然後點選工具分頁 (自訂
) 。
自訂 DevTools 頁面包含多個區塊：
記憶體顯示資訊。
一個按鈕，用來從 DevTools 傳送訊息到檢查的網頁，讓頁面顯示 JavaScript
alert對話框。座標顯示區，用來從檢查網頁發送訊息至開發工具主控台及自訂工具。
步驟 4：透過擴充 API 呼叫查看記憶體資訊
在 自訂 工具中，在 可用記憶體容量旁邊，觀察值每秒更新一次：
步驟 5：從 DevTools 發送訊息到檢查頁面
在 自訂 工具中，點擊 「Say Hello 」按鈕。
會跳出一個 JavaScript
alert對話框，顯示訊息：「來自 DevTools 擴充套件的問候！」
DevTools 會向檢查中的網頁發送訊息，導致 JavaScript 顯示警示。
點擊 確定 按鈕。
對話結束。
步驟 6：從檢查頁面發送訊息到 DevTools
在檢查過的網頁中，點擊不同位置。
在 自訂 工具中 ，座標旁邊會顯示並更新座標，當你點擊時：
在 DevTools 的 活動欄中，選擇 主控台 (
) 工具。在檢查過的網頁中，點擊不同位置。
點擊的座標會顯示在 控制台中：
步驟7：修改自訂工具
如果還沒做，就安裝 Visual Studio Code。
開啟 Visual Studio Code。
點選 檔案 選單，然後點 選開啟資料夾。
開啟 資料夾 對話框。
導覽到該
/Demos-main/devtools-extension/資料夾，例如C:\Users\localAccount\GitHub\Demos-main\devtools-extension\，然後點擊 「選擇資料夾 」按鈕。在 檔案總管 窗格中，
/devtools-extension/資料夾會顯示出來。點擊
panel.html。panel.html開啟編輯：
在標題後加上「我的」
<h2>;變更為：<h2>Custom DevTools Tool</h2>收件人：
<h2>My Custom DevTools Tool</h2>儲存
panel.html。在 Explorer 選區，點擊
manifest.json。manifest.json已開放進行編輯。在 ; 後加上「我的」
name，變換為："name": "Custom DevTools Tool",收件人：
"name": "My Custom DevTools Tool",儲存
manifest.json。
步驟八：重新載入修改過的自訂工具
在 Microsoft Edge 裡，選擇 設定及其他 (設定
) ，將滑鼠移到 擴充功能上，然後選擇 管理擴充功能。擴充 功能 分頁和頁面會 (
edge://extensions) 開啟。在 自訂 DevTools 工具 卡中，點選 Reload 連結。
卡片現在顯示「 我的自訂開發工具工具 」作為擴充功能的名稱：
步驟 9：使用修改過的自訂工具
在新的視窗或分頁中，前往網頁，例如 待辦應用程式。
自訂開發工具需要網頁，而不是空白分頁。
右鍵點擊網頁，然後選擇 檢查。
DevTools 開啟。
在 DevTools 的 活動列 中，點擊 工具 分頁 (自訂
) 。自訂 工具會 顯示，面板標題中加上「 我的」 一詞：
如果標題還是寫 著 Custom DevTools Tool ，而不是 My Custom DevTools Tool，請關閉並重新開啟 DevTools。
如果 自訂 (
) 工具的分頁看不到，請執行以下任一步驟：點選 「更多工具 」
) 按鈕，然後選擇 自訂。把 DevTools 做得更寬，然後點選工具分頁 (自訂
) 。
這就是使用與修改 DevTools 擴充範例的步驟結束。
疑難排解
如果 DevTools 裡看不到 自訂 標籤，或是它過時且無法顯示你最新的程式碼變更：
將 DevTools 擴大，讓活動 欄中顯示許多工具。
關閉並重新開啟 DevTools。
重新整理或硬刷新檢查過的頁面。
在 Microsoft Edge 的 擴充功能 頁面，點擊 「重新載入 」以取得擴充功能。
若此類擴充功能中沒有提供圖示，未選取時的分頁會狹窄且灰色，位於 活動列右側。 點選那個狹窄的灰色分頁。
去網頁，而不是空白分頁。範例「自訂開發工具工具」中的程式碼需要網頁。
當活動欄變窄時，自訂開發工具工具會被加入活動欄的「更多工具」選單。
自訂標籤的右鍵選單沒有「從活動欄移除」的指令。