扩展程序能够利用 Chrome 开发者工具为网页提供的相同调试优势，但它们具有独特的行为属性。要成为扩展程序调试大师，您需要了解这些行为、扩展程序组件如何相互协作，以及在何处发现 bug。本教程旨在帮助开发者基本了解如何调试扩展程序。
查找日志
扩展程序由许多不同的组件构成，这些组件各自承担不同的责任。点击此处下载损坏的扩展程序，开始查找不同扩展程序组件的错误日志。
后台脚本
前往 chrome://extensions 中的 Chrome 扩展程序管理页面，并确保开发者模式处于开启状态。点击加载未打包的扩展程序按钮，然后选择损坏的扩展程序目录。加载扩展程序后，它应该有三个按钮：详细信息、移除和错误（红色字母）。
点击错误按钮可查看错误日志。扩展程序系统在后台脚本中发现了一个问题。
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”。更新代码以反映正确的调用，点击右上角的 Clear all（全部清除）按钮，然后重新加载扩展程序。
弹出式窗口
现在，扩展程序已正确初始化，可以测试其他组件了。刷新此页面，或打开新 Tab 页并前往 developer.chrome.com 上的任意页面，然后打开弹出式内容（窗口/广告/etc.）并点击绿色方块。然后…什么都没发生。
返回到“扩展程序管理”页面后，错误按钮会重新显示。点击该日志即可查看新日志。
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;'});
});
};
更新代码，点击右上角的 Clear all 按钮，然后重新加载扩展程序。
内容脚本
刷新页面，打开弹出式窗口，然后点击绿色框。结果是... 还是不行，背景颜色仍然没有变化！返回到“扩展程序管理”页面，但没有错误按钮。可能的原因是内容脚本，该脚本在网页内运行。
打开扩展程序尝试更改的网页的开发者工具面板。
只有运行时错误、console.warning 和 console.error 会记录在“扩展程序管理”页面上。
如需从内容脚本中使用开发者工具，请点击 top 旁边的下拉箭头，然后选择相应扩展程序。
错误消息显示 color 未定义。扩展程序可能未正确传递变量。
更正注入的脚本，以将颜色变量传递到代码中。
{code: 'document.body.style.backgroundColor = "' + color + '";'});
扩展程序标签页
以标签页形式显示的扩展程序页面的日志（例如替换页面和全屏选项）可在网页控制台和扩展程序管理页面中找到。
监控网络请求
弹出式窗口通常会在最快的开发者打开开发者工具之前发出所有必需的网络请求。如需查看这些请求，请从“网络”面板中刷新。它会重新加载弹出式窗口，而不会关闭开发者工具面板。
声明权限
虽然扩展程序具有与网页类似的功能，但通常需要获得使用某些功能（例如 Cookie、存储空间和 Cross-Origin XMLHttpRequest）的权限。请参阅权限文章和可用的 Chrome API，确保扩展程序在其清单中请求正确的权限。
{
"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 开发者工具，请参阅相关文档。