Google Chrome Javascript 调试器和内容脚本

Posted 2023-02-22

【中文标题】Google Chrome Javascript 调试器和内容脚本

【英文标题】：Google Chrome Javascript Debugger and Content Scripts

【发布时间】：2010-10-28 02:25:38

【问题描述】：

before 也有人问过这个问题，但我似乎无法在 Google Chrome 中调试 javascript。

如果我转到页面 > 开发人员，“调试 Javascript”（Ctrl+Shift+L）被禁用。 Alt + ` 不起作用。

我正在开发一个“内容脚本”扩展，因此我正在使用--enable-extensions 启动 chrome。

我最理想的做法是设置断点并在我的脚本执行时单步执行/运行。谈到 JavaScript，我有点不知所措，因此感谢您提供任何指导。

我可以访问“JavaScript 控制台”，但在其中找不到内容脚本。我也不确定这与“JavaScript 调试器”有何不同。

我在 Windows XP 上使用 Chrome 的最新开发版本 (2.0.181.1)。

【问题讨论】：

你可以放下你正在使用的windows版本：XP、Vista、7RC...我知道Chrome和Windows 7相处得不是特别好。

【参考方案1】：

右键单击并选择 Inspect Element，您将在其中找到 JS 调试器以及其他调试工具。 JS 调试器应该允许您设置断点等。

【讨论】：

嗯，这是 JavaScript 控制台，而不是调试器。似乎有区别。我可能在这里很密集，但此时我找不到将断点插入脚本的方法。如何查看作为事件侦听器添加到特定对象的内容脚本函数？例如我希望能够在 this.addEventListener('click', myFuncHere, true); 中调试 'myFuncHere()';

如果您单击 Inspector 窗口顶部的“脚本”按钮，那应该是调试器。您可以从下拉菜单中选择特定的脚本源，然后单击行号来设置断点。

感谢您的提示，Scott，但我没有看到我的任何用户脚本，只有网站上的那些。我错过了什么吗？

我安装了示例 GMail 检查器扩展 dev.chromium.org/developers/design-documents/extensions/samples 并通过右键单击底部的已安装按钮能够选择“检查元素”，这将检查器/调试器的范围限制为扩展。

【参考方案2】：

您要做的是启用您的扩展程序，然后在 Chrome 中单击“开发人员”->“Javascript 控制台”。然后单击“脚本”选项卡。之后，您应该会在所有已加载脚本的下方看到一个列表。您将看到当前页面的脚本以及您已安装的任何扩展的所有脚本。 （如果打开控制台后没有看到列出的任何脚本，则可能需要刷新）

似乎所有 Chrome 扩展程序都被分配了一个唯一的 ID。您可以通过在开发者模式下查看 Chrome 扩展程序页面找到您的 ID。

然后，只需在下拉列表中搜索脚本即可。选择你的脚本，你可以设置断点等。

这里有更多关于 Chrome 开发工具的信息： http://www.chromium.org/devtools

【参考方案3】：

将以下命令放入您的脚本中：

debugger;

当它到达该点时将启动 Javascript 调试器

【讨论】：

萤火虫有机会支持这个吗？

我认为这适用于 Firebug。如果可行，为什么不尝试并在此处回复？ :)

【参考方案4】：

这些答案似乎都已经过时了，由于这在谷歌中排名很高，所以这是最新的答案：

在 Chrome 中按 CTRL+SHIFT+i 以调出开发者工具。

选择“来源”

单击允许您从脚本中进行选择的小箭头

然后选择“内容脚本”

然后，您需要知道您的扩展程序的 ID（可从 chrome 管理扩展程序页面获得）才能访问您的脚本并正常调试它们。

【讨论】：

哇，过去的爆炸。我真的不记得关于这个问题/开发 Chrome 扩展的任何内容，但这似乎是一个可靠的答案。感谢您的参与。

您不再需要知道扩展 ID。它们现在按名称列出。

此外，如果您搞砸了清单的 content_scripts 部分，您根本不会看到列出的内容脚本，会默默地出错。例如，如果您想为 Facebook 加载一个并且只在 content_scripts 中输入 facebook.com，那么无论何时您不在主页上（没有尾随星号）或在包含移动域的链接上，您最终都不会加载它(m.facebook.com) 等