開發人員工具擴充功能可存取開發人員工具專屬的開發人員工具,為 Chrome 開發人員工具新增功能 。
![顯示開發人員工具頁面與
檢查期間和 Service Worker。Service Worker 已顯示
與內容指令碼通訊,以及存取擴充功能 API。
開發人員工具頁面可以存取開發人員工具 API,例如建立面板。](https://developer.chrome.com/static/docs/extensions/how-to/devtools/extend-devtools/image/architecture-diagram.png?authuser=19&hl=zh-tw)
開發人員工具專屬擴充功能 API 包括:
開發人員工具頁面
「開發人員工具」視窗開啟時,「開發人員工具」擴充功能會建立其「開發人員工具」頁面執行個體, 只要視窗處於開啟狀態,就會持續存在。這個頁面可存取開發人員工具 API 和擴充功能 API,並可執行下列操作:
- 使用
devtools.panels
API 建立面板並進行互動,包括將其他擴充功能頁面新增為開發人員工具視窗的面板或側欄。 - 取得檢查視窗的相關資訊,並使用以下程式碼評估檢查視窗的程式碼:
devtools.inspectedWindow
API。 - 使用
devtools.network
API 取得網路要求的相關資訊。 - 使用
devtools.recorder
API 擴充錄音工具面板。 - 使用
devtools.performance
API,取得效能面板的記錄狀態資訊。
開發人員工具頁面可以直接存取擴充功能 API。這包括 與 Service Worker 通訊 訊息傳遞。
建立開發人員工具擴充功能
如要為擴充功能建立開發人員工具頁面,請在擴充功能中新增 devtools_page
欄位
資訊清單:
{
"name": ...
"version": "1.0",
"devtools_page": "devtools.html",
...
}
devtools_page
欄位必須指向 HTML 網頁。由於開發人員工具
網頁必須為擴充功能的本機網頁,建議您使用相對網址加以指定。
只有透過開發人員工具載入的網頁才能使用 chrome.devtools
API 的成員
。內容指令碼和其他擴充功能頁面沒有存取權
這些 API。
開發人員工具 UI 元素:面板和側欄窗格
除了一般的擴充功能 UI 元素 (例如瀏覽器動作、內容選單和彈出式視窗) 之外, 開發人員工具擴充功能可將 UI 元素新增至開發人員工具視窗:
- 面板是頂層分頁,例如「元素」、「來源」和「網路」面板。
- 側欄窗格會顯示與面板相關的補充 UI。樣式、計算樣式和 「元素」面板上的「事件監聽器」窗格是側欄窗格的範例。根據用途 以及「開發人員工具」視窗固定位置時,你的側欄窗格可能會 如下圖所示:
![「DevTools」視窗顯示「Elements」面板和「Styles」側欄窗格。](https://developer.chrome.com/static/docs/extensions/how-to/devtools/extend-devtools/image/devtools-window-showing-e-9051f7f0347cd.png?authuser=19&hl=zh-tw)
每個面板都有專屬的 HTML 檔案,可包含其他資源 (JavaScript、CSS、圖片等) 開啟)。如要建立基本面板,請使用下列程式碼:
chrome.devtools.panels.create("My Panel",
"MyPanelIcon.png",
"Panel.html",
function(panel) {
// code invoked on panel creation
}
);
在面板或側欄窗格中執行的 JavaScript,可存取開發人員工具頁面的 API。
如要建立基本側欄窗格,請使用下列程式碼:
chrome.devtools.panels.elements.createSidebarPane("My Sidebar",
function(sidebar) {
// sidebar initialization code here
sidebar.setObject({ some_data: "Some data to show" });
});
在側欄窗格中顯示內容的方式有幾種:
- HTML 內容:呼叫
setPage()
即可指定要在窗格中顯示的 HTML 網頁。 - JSON 資料:將 JSON 物件傳遞至
setObject()
。 - JavaScript 運算式:將運算式傳遞至
setExpression()
。DevTools 會根據受檢查網頁的內容評估運算式,然後顯示傳回值。
如果是 setObject()
和 setExpression()
,窗格會顯示的值,與
開發人員工具控制台。不過,setExpression()
可顯示 DOM 元素和任意 JavaScript
物件,setObject()
則僅支援 JSON 物件。
在擴充功能元件之間進行通訊
以下各節說明一些允許開發人員工具元件的實用做法 之間的通訊
插入內容指令碼
如要插入內容指令碼,請使用 scripting.executeScript()
:
// DevTools page -- devtools.js
chrome.scripting.executeScript({
target: {
tabId: chrome.devtools.inspectedWindow.tabId
},
files: ["content_script.js"]
});
您可以使用
inspectedWindow.tabId
資源。
如果已插入內容指令碼,您可以使用訊息傳遞 API 來 與 Google 服務相互通訊
在檢查的視窗中評估 JavaScript
您可以使用 inspectedWindow.eval()
方法執行 JavaScript
與所檢查網頁相對應的程式碼。您可以透過開發人員工具頁面叫用 eval()
方法。
或側欄窗格
根據預設,運算式會根據網頁的主要頁框進行評估。
inspectedWindow.eval()
採用與程式碼相同的指令碼執行環境和選項
已在開發人員工具控制台輸入,該工具可存取開發人員工具控制台公用程式
API 功能。eval()
舉例來說,SOAK 可用來檢查元素:
chrome.devtools.inspectedWindow.eval(
"inspect($$('head script[data-soak=main]')[0])",
function(result, isException) { }
);
您也可以在呼叫 inspectedWindow.eval()
時,將 useContentScriptContext
設為 true
,
請在內容指令碼相同的情況下來評估運算式。如要使用這個選項,請先呼叫 executeScript()
或指定內容,先使用靜態內容指令碼宣告,再呼叫 eval()
manifest.json
檔案中的指令碼。內容指令碼內容載入後,您也可以使用這個選項
插入其他內容指令碼。
將所選元素傳遞至內容指令碼
內容指令碼無法直接存取目前所選元素。但請注意,
透過「inspectedWindow.eval()
」可以使用開發人員工具
和主控台公用程式 API舉例來說,在經過評估的程式碼中,您可以使用 $0
存取
選取的元素
如何將所選元素傳遞至內容指令碼:
在內容指令碼中建立方法,以將所選元素做為引數。
function setSelectedElement(el) { // do something with the selected element }
使用
inspectedWindow.eval()
透過開發人員工具頁面呼叫該方法useContentScriptContext: true
選項。chrome.devtools.inspectedWindow.eval("setSelectedElement($0)", { useContentScriptContext: true });
useContentScriptContext: true
選項會指定運算式必須評估在
與內容指令碼相同,因此可以存取 setSelectedElement
方法。
取得參考面板的 window
如要從開發人員工具面板中呼叫 postMessage()
,您需要參照其 window
物件的參照。取得
panel.onShown
事件處理常式取得面板的 iframe 視窗:
extensionPanel.onShown.addListener(function (extPanelWindow) {
extPanelWindow instanceof Window; // true
extPanelWindow.postMessage( // …
});
透過插入的指令碼將訊息傳送至開發人員工具頁面
直接插入網頁的程式碼,無需使用內容指令碼,包括附加 <script>
標記或呼叫 inspectedWindow.eval()
,也無法傳送訊息給
使用 runtime.sendMessage()
的開發人員工具頁面。建議你改用
結合插入的指令碼與中介內容的內容腳本
window.postMessage()
方法。以下範例使用背景指令碼
請參閱上一節的內容:
// injected-script.js
window.postMessage({
greeting: 'hello there!',
source: 'my-devtools-extension'
}, '*');
// content-script.js
window.addEventListener('message', function(event) {
// Only accept messages from the same frame
if (event.source !== window) {
return;
}
var message = event.data;
// Only accept messages that we know are ours. Note that this is not foolproof
// and the page can easily spoof messages if it wants to.
if (typeof message !== 'object' || message === null ||
message.source !== 'my-devtools-extension') {
return;
}
chrome.runtime.sendMessage(message);
});
如要瞭解其他替代訊息傳送技術,請前往 GitHub。
偵測開發人員工具的開啟和關閉時機
如要追蹤開發人員工具視窗是否已開啟,請新增 onConnect 事件監聽器 然後透過開發人員工具頁面呼叫 connect()。由於 每個分頁都可以開啟專屬的開發人員工具視窗,你可能會收到多個連結事件。 如要追蹤任何開發人員工具視窗是否已開啟,請計算連線及取消連結事件,如下所示 在以下範例中:
// background.js
var openCount = 0;
chrome.runtime.onConnect.addListener(function (port) {
if (port.name == "devtools-page") {
if (openCount == 0) {
alert("DevTools window opening.");
}
openCount++;
port.onDisconnect.addListener(function(port) {
openCount--;
if (openCount == 0) {
alert("Last DevTools window closing.");
}
});
}
});
開發人員工具頁面會建立如下所示的連線:
// devtools.js
// Create a connection to the service worker
const serviceWorkerConnection = chrome.runtime.connect({
name: "devtools-page"
});
// Send a periodic heartbeat to keep the port open.
setInterval(() => {
port.postMessage("heartbeat");
}, 15000);
開發人員工具擴充功能範例
本頁面的範例出自以下網頁:
- Polymer Devtools 擴充功能 - 使用主機頁面中執行的許多輔助程式進行查詢 要傳回自訂面板的 DOM/JS 狀態。
- React DevTools 擴充功能:使用轉譯器的子模組重複使用開發人員工具 UI 元件。
- Ember Inspector - 共用擴充功能核心 (搭配 Chrome 和 Firefox 使用轉接器)。
- Coquette-inspect - 插入偵錯代理程式的簡潔 React 擴充功能 。
- 擴充功能範例更值得安裝、試用及學習
更多資訊
如要進一步瞭解擴充功能可使用的標準 API,請前往 chrome*。*API 和網路 API
請提供寶貴意見!您的意見和建議有助於我們改善 API。
範例
如需使用開發人員工具 API 的範例,請參閱範例。