除了 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 擴充功能:
前往 Microsoft Edge 的附加元件,例如開發人員工具類別,然後選擇你想安裝的擴充功能。
例如,請參考 React 開發者工具擴充功能,以下是以下步驟的範例:
點擊 「取得 」按鈕。 會跳出安裝對話框,問: 為 Microsoft Edge 新增 <擴充功能名稱> ?
點擊 新增擴充功能 按鈕。 對話框顯示擴充功能已安裝,) 按鈕上的擴充功能 (擴充
現在列出了擴充功能。打開一個新的分頁或視窗,然後前往包含與 DevTools 擴充功能相關內容的頁面。 例如,使用 TodoMVC React 範例頁面,或前往 Microsoft Edge Demos 的即時展示頁面,例如 demo-to-do。
開啟 DevTools,例如按 F12。 在這個 React 擴充中,活動欄會開啟兩個新分頁:元件與剖析器:
如果活動 列中沒有顯示新分頁,請將 DevTools 擴大,或點擊 「更多工具 」
) 按鈕,然後選擇該工具:
建立 DevTools 擴充功能
你可以建立自己的 DevTools 擴充功能,在 DevTools 活動列新增分頁,並與檢查頁面互動。
請參考 建立 DevTools 擴充功能。