本頁面由 Cloud Translation API 翻譯而成。

擴充開發人員工具

開發人員工具擴充功能可存取開發人員工具專屬的開發人員工具，為 Chrome 開發人員工具新增功能。

開發人員工具專屬擴充功能 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」側欄窗格。 — 開發人員工具視窗顯示「Elements」面板和「Styles」側欄窗格。

每個面板都有專屬的 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() 方法。或側欄窗格

注意：請只在需要存取受檢查網頁的 JavaScript 內容時使用 eval()。否則建議您使用 scripting.executeScript() 方法執行指令碼。詳情請參閱 inspectedWindow。

根據預設，運算式會根據網頁的主要頁框進行評估。 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 的範例，請參閱範例。

擴充開發人員工具

開發人員工具頁面

建立開發人員工具擴充功能

開發人員工具 UI 元素：面板和側欄窗格

在擴充功能元件之間進行通訊

插入內容指令碼

在檢查的視窗中評估 JavaScript

將所選元素傳遞至內容指令碼

取得參考面板的 window

透過插入的指令碼將訊息傳送至開發人員工具頁面

偵測開發人員工具的開啟和關閉時機

開發人員工具擴充功能範例

更多資訊

範例

取得參考面板的 `window`