我如何在谷歌chrome中调试一个以编程方式注入的JS文件

Question

我正在通过将js文件注入谷歌chrome中的每个页面

chrome.browserAction.onClicked.addListener(function(tab) {  
  chrome.tabs.executeScript(null,{file:"js/content.js"},function(resultArr){
    console.log(resultArr);
  });  
});

content.js

console.log("hello stackoverflow");

我可以在网页的控制台上看到打印的hello stackoverflow。但是我找不到源文件，所以我可以调试它。知道怎么做吗？

Answer 1

使用debugger关键字。这就像在JS代码中插入一个断点

因此在content.js中

debugger;
console.log("hello stackoverflow");

Answer 2

我知道这是一个老问题，但对于任何偶然发现这个问题的人来说，都有一个更干净的解决方案。

只需添加

//@ sourceURL = your_injected_file.js

在您的_injected_file.js顶部。第一次注入脚本后，脚本应该在"开发工具">"源代码">"内容脚本"下可见。

Answer 3

您可以在控制台中键入以下内容：angular.element（$0）.scope（）

然后，您可以通过展开结果来搜索要调试的函数。

您将看到FunctionLocation链接作为节点下的一个子链接。您可以单击链接打开文件，在其中可以放置调试点并进行调试。