Debugging 调试Chrome扩展的内容脚本 一般问题

你好!！我正在钻研Chrome扩展的世界，在完成整个工作流程时遇到了一些问题。谷歌最近似乎转向大力宣传事件页面，而不是将所有内容都保存在background.js和background.html中。我之所以这样做，是因为我们应该将大部分扩展逻辑传递给内容脚本

在中，他们在manifest.json文件中列出了内容脚本。但是在他们的事件页面示例扩展中，它是通过background.js中的这个代码块引入的：

chrome.tabs.executeScript（tab.id，{file:'content.js}，function（）{}）

这样做的好处是什么

我的代码
我将继续使用注入内容脚本的编程方式，比如谷歌的例子

manifest.json
background.js
content.js
我能够在后台页面的调试器中显示前3条
console.log
语句。我还可以从content.js获取警报，以显示在任何网站上。但是我无法从content.js查看
console.log
，也无法从content.js查看任何js。我试着在后台页面调试器的源选项卡的“内容脚本”部分查找。其他一些关于SO的帖子建议添加
调试器语句，让它显示出来，但我在任何事情上都没有运气。我见过的最接近的解决方案是，但是通过在清单中列出内容脚本来实现

任何帮助都将不胜感激。谢谢
 内容脚本的console.log消息显示在网页的控制台中，而不是背景页的检查器中

添加
调试器在开发人员工具（用于插入内容脚本的网页）打开时起作用

因此，在这种情况下，在单击浏览器操作图标之前，您应该首先激活（网页的）开发工具，一切都应该正常工作。
我尝试使用
调试器
方法，但效果不好，因为项目使用
require.js
绑定javascript文件

如果您也在使用
require.js
进行chrome扩展开发，您可以尝试向代码库添加类似的内容，并将
eval（xhr.responseText）
更改为
eval（xhr.responseText+”\n/@sourceURL=“+url）。（像这样）

然后您可以在开发工具中看到源文件（但不是后台html窗口）
太好了，可以了！是
调试器语句总是需要让调试器识别扩展环境中的内容脚本吗？看起来你只有一次通过断点。在以后尝试运行扩展时，内容脚本将加载到新环境中，并且您将丢失原始断点。调试器将保留页面加载，并且如果您打开了开发人员工具（F12），调试器将始终中断。它们是硬编码到脚本中的，所以不要忘记以后删除它们。调试器将在任何javascript上工作，它们不是内容脚本独有的。如果内容脚本存在错误，例如括号不匹配（例如，在将内联函数作为参数传递后忘记关闭
）
），则不会给出错误，即使使用
调试器也会自动失败。这真令人沮丧。如何调试它？在background.js或contextscript.js中将“debugger；”放在哪里？具体在哪里？你的问题解决了我的问题。通过清单注入内容脚本，我无法真正与网页的DOM交互。现在，通过浏览器操作加载contentScript解决了我的问题。谢谢谢谢。
{
    "manifest_version": 2,
    "name": "Test",
    "description": "Let's get this sucker working",
    "version": "0.0.0.1",
    "permissions": [
        "tabs",
        "*://*/*"
    ],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "browser_action": {
        "default_icon": "icon.png"
    }
}

chrome.browserAction.onClicked.addListener(function() {
    console.log("alert from background.js");
    chrome.tabs.executeScript({file: "jquery-2.0.2.min.js"}, function() {
        console.log("jquery Loaded");
    });
    chrome.tabs.executeScript({file: "content.js"}, function() {
        console.log("content loaded");
    });
});

console.log('you\'r in the world of content.js');
var ans = {};

ans.createSidebar = function() {

    return {
        init: function(){
            alert("why hello there");
        }
    }
}();

ans.createSidebar.init();