偵錯擴充功能

擴充功能可利用 Chrome 開發人員工具為網頁提供的偵錯功能，但它們具有獨特的行為屬性。要成為擴充功能偵錯工具大師，您必須瞭解這些行為、擴充功能元件如何相互運作，以及要從何處找出錯誤。本教學課程可讓開發人員對偵錯擴充功能有基本認識。

找出記錄檔

擴充功能由許多不同元件組成，這些元件各自負責不同的工作。請在這裡下載有問題的擴充功能，開始找出不同擴充功能元件的錯誤記錄。

背景指令碼

前往 chrome://extensions 的 Chrome 擴充功能管理頁面，並確認已開啟開發人員模式。按一下「Load Unpacked」按鈕，然後選取錯誤的擴充功能目錄。擴充功能載入後，應該會顯示三個按鈕：以紅色字母顯示的「Details」、「Remove」和「Errors」。

按一下「Errors」按鈕，即可查看錯誤記錄。擴充功能系統在背景指令碼中發現問題。

Uncaught TypeError: Cannot read property 'addListener' of undefined

此外，您也可以選取「檢查檢視畫面」旁的藍色連結，為背景指令碼開啟 Chrome 開發人員工具面板。

返回程式碼。

chrome.runtime.oninstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

背景指令碼嘗試監聽 onInstalled 事件，但屬性名稱需要大寫的「I」。更新程式碼以反映正確的呼叫，按一下右上角的「清除全部」按鈕，然後重新載入擴充功能。

彈出式廣告

擴充功能已正確初始化，因此可以測試其他元件。重新整理這個頁面，或開啟新分頁並前往 developer.chrome.com 上的任何頁面，開啟彈出式視窗，然後按一下綠色方塊。但... 什麼事也沒發生。

返回「擴充功能管理」頁面，您會發現「Errors」按鈕已重新顯示。按一下即可查看新記錄。

Uncaught ReferenceError: tabs is not defined

您也可以檢查彈出式視窗，查看彈出式視窗錯誤。

錯誤 tabs is undefined 表示擴充功能不知道要將內容指令碼插入何處。您可以呼叫 tabs.query() 方法，然後選取有效分頁，即可修正這個問題。

  let changeColor = document.getElementById('changeColor');

  chrome.storage.sync.get('color', function(data) {
    changeColor.style.backgroundColor = data.color;
    changeColor.setAttribute('value', data.color);
  });

  changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: 'document.body.style.backgroundColor = color;'});
    });
  };

更新程式碼，按一下右上角的「清除所有」按鈕，然後重新載入擴充功能。

內容指令碼

重新整理頁面、開啟彈出式視窗，然後按一下綠色方塊。而且... 不，背景顏色仍未變更！返回「Extensions Management」頁面，您會發現頁面上沒有「Errors」按鈕。問題可能出在網頁中執行的內容指令碼。

開啟擴充功能嘗試變更的網頁 DevTools 面板。

擴充功能管理頁面只會記錄執行階段錯誤 console.warning 和 console.error。

如要在內容指令碼中使用開發人員工具，請按一下「頂端」旁的下拉式箭頭，然後選取擴充功能。

錯誤訊息指出未定義 color。擴充功能未正確傳遞變數。修正插入的腳本，將顏色變數傳遞至程式碼。

  {code: 'document.body.style.backgroundColor = "' + color + '";'});

擴充功能分頁

擴充功能頁面記錄會顯示為分頁，例如覆寫頁面和全頁選項，您可以在網頁控制台和擴充功能管理頁面中找到這些記錄。

監控網路要求

彈出式視窗通常會在最快的開發人員開啟 DevTools 之前，發出所有必要的網路要求。如要查看這些要求，請在網路面板中重新整理。這會重新載入彈出式視窗，但不會關閉「開發人員工具」面板。

宣告權限

雖然擴充功能的功能與網頁類似，但通常需要使用特定功能的權限，例如 Cookie、儲存空間和跨來源 XMLHttpRequsts。請參閱權限文章和可用的 Chrome API，確保擴充功能在manifest中要求正確的權限。

  {
    "name": "Broken Background Color",
    "version": "1.0",
    "description": "Fix an Extension!",
    "permissions": [
      "activeTab",
      "declarativeContent",
      "storage"
    ],
    "options_page": "options.html",
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    },
    "manifest_version": 2
  }

後續步驟

如要進一步瞭解如何偵錯擴充功能，請觀看「開發與偵錯」影片。如要進一步瞭解 Chrome 開發人員工具，請參閱說明文件。