共用方式為


用擴充功能為 DevTools 新增自訂 UI

除了 Microsoft Edge DevTools 中可用的工具外,你還可以透過安裝 Microsoft Edge 擴充功能來新增工具,或為特定使用情境自行建立擴充功能。 Microsoft Edge 擴充功能通常會擴充 Microsoft Edge 的使用者介面,加入新的按鈕和面板,但也能透過在 活動列新增工具分頁來擴充 Microsoft Edge 內的開發工具。

找一個能擴充 DevTools 的擴充功能

Microsoft Edge Add-ons開發人員工具類別包含通常擴充 DevTools 的擴充功能。

沒有執行擴充功能或查看原始碼,無法知道擴充功能是否延伸了 DevTools 活動列,但 Microsoft Edge Add-ons 的開發人員工具分類是個不錯的參考點。

在 DevTools 安裝擴充套件

要安裝擴充 DevTools 的 Microsoft Edge 擴充功能:

  1. 前往 Microsoft Edge 的附加元件,例如開發人員工具類別,然後選擇你想安裝的擴充功能。

    例如,請參考 React 開發者工具擴充功能,以下是以下步驟的範例:

    Microsoft Edge 附加元件上的 React 開發者工具頁面

  2. 點擊 「取得 」按鈕。 會跳出安裝對話框,問: 為 Microsoft Edge 新增 <擴充功能名稱> ?

  3. 點擊 新增擴充功能 按鈕。 對話框顯示擴充功能已安裝,) 按鈕上的擴充功能 (擴充 功能圖示 現在列出了擴充功能。

  4. 打開一個新的分頁或視窗,然後前往包含與 DevTools 擴充功能相關內容的頁面。 例如,使用 TodoMVC React 範例頁面,或前往 Microsoft Edge Demos 的即時展示頁面,例如 demo-to-do

  5. 開啟 DevTools,例如按 F12。 在這個 React 擴充中,活動會開啟兩個新分頁:元件剖析器

    DevTools,顯示兩個新的 React 擴充工具分頁

  6. 如果活動 中沒有顯示新分頁,請將 DevTools 擴大,或點擊 「更多工具 (「更多工具」圖示) 按鈕,然後選擇該工具:

    在 DevTools 中加入更多工具按鈕,將工具加入活動列

建立 DevTools 擴充功能

你可以建立自己的 DevTools 擴充功能,在 DevTools 活動列新增分頁,並與檢查頁面互動。

請參考 建立 DevTools 擴充功能