我如何在谷歌浏览器中调试以编程方式注入的JS文件？

Question

我通过

将js文件注入Google 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

在your_injected_file.js的顶部。首次注入脚本后，该脚本应该在“开发人员工具”>“源”>“内容脚本”下可见。

Answer 3

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

然后，您可以通过扩展结果来搜索要调试的功能。

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