如何输出和查看调试信息有时的程序是否按照我们预想的那样执行

如何输出和查看调试信息

有时我们需要看看我们的程序是否按预期执行Chrome 自动升级后，本地项目都无法访问，可以输出一些调试信息，如下：

console.log("clicked");

我在哪里可以找到这些信息？其实有两个地方，要看日志语句是后台执行还是前台执行。

这个函数还可以测试js语句是否正确执行。

区分正面和背面

扩展的开发语言为js，后台的js代码通常控制着整个扩展程序的运行状态；而前端js可以控制和操作我们打开的标签页的DOM树，比如点击一个链接，改变当前页面的背景色等。背景js是在.json文件中配置的：

{
  "name": "我的chrome插件",
  "version": "1.0",
  "manifest_version": 2,
  "description": "第一个chrome插件！",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "options_page": "options.html",
  "background": { "scripts": ["background.js"] },
  "permissions": [
    "tabs", "http://*/*"
  ]
}

以上配置了扩展的名称、描述、版本、类型（在工具栏上添加图标）、后台js、选项页面和权限。

后台js在插件加载完成后立即执行，驻留在内存中，不像前台js变量状态会因为页面重载而失效。所以对于需要维护状态的变量，只能在后台js中定义。

那么前台是如何访问这些变量的呢？通过消息传递。

消息传递

消息传递很重要，因为前台和后台的分工不同。完成一件事情Chrome 自动升级后，本地项目都无法访问，通常需要前后台相互配合。

1、后台发送

chrome.tabs.sendMessage(dTabid,
                        {  
                           'msg': '传给前台的消息' 
                        }, 
                        function(response) {  
                            //回传函数    
                        });   
//dTabid是前台Tab的id

前台：

//接收消息
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {  
    console.log('收到消息' + request.msg);
}); 

2、前台发：

chrome.extension.sendMessage({'msg':'前台发给后台的消息'},function(response) {
    //后台又回复过来的        
});

后台：

chrome.extension.onMessage.addListener(function(msg, _, sendResponse) {
  　　console.log("收到消息，开始任务");
}

让前台执行js代码

chrome.tabs.executeScript(sTabid, { file: "click.js" });

指示要在当前选项卡上执行代码的选项卡的 ID，或为 null。有时页面还没有加载，可以通过订阅事件或者使用几秒的延迟来执行。

点击插件图标执行代码

chrome.browserAction.onClicked.addListener(function(tab) {
    console.log("click");
});

创建一个新标签并访问此标签中的网页

chrome.tabs.create({'url': ‘http://www.cnblogs.com’,'selected':false}, function(tab2) {
                console.log("OK");
});

转载于：