使用 Developer 工具调试扩展

镀 Chrome 延伸部分最多分为 4 个部分：

• 背景页面
• 弹出页面
• 一个或多个内容脚本
• 选项页面

每个部分由于它们天生独立，因此需要单独调试。

请记住，这些页面是分开的，这意味着它们之间不直接共享变量，并且其中一个页面中的 console.log() 在任何其他部分的日志中都不可见。

使用 chrome devtools：

Chrome 扩展程序的调试类似于其他网络应用程序和网页。调试通常是使用 chrome 的 devtools 检查器完成的，分别使用 windows 和 mac 的键盘快捷键打开： ctrl + shift + i 和 cmd + shift + i 或右键单击页面并选择 inspect。

从检查器开发人员可以检查 html 元素以及 css 如何影响它们，或者使用控制台检查 javascript 变量的值并从开发人员设置的任何信息中读取输出。

有关检查员使用情况的更多信息，请访问 Chrome Devtools 。

使用 chrome：//…..yourExtensionId … /检查弹出窗口，选项页面和其他可访问的页面：

在弹出页面和选项页面可以分别通过检查他们时，他们是开放的简单访问。

作为扩展的一部分的其他 html 页面，既不是弹出页面也不是选项页面也以相同的方式调试。

检查背景页面：

要访问你的*背景页面，*你必须首先导航到 chrome：// extensions / 的 chrome 扩展页面。确保已启用 开发者模式复选标记。

然后单击 检查视图 旁边的后台脚本以检查后台页面。

检查内容脚本：

内容脚本与插入的网站一起运行。你可以通过首先检查插入内容脚本的网站来检查内容脚本。在控制台中，你将能够查看扩展程序输出的任何 console.log()，但你将无法更改或检查内容脚本的变量。

要解决此问题，你必须单击通常设置为'top'的下拉列表，然后从扩展名列表中选择你的扩展名。

从那里，你可以访问扩展程序中的变量。