从Chrome扩展程序中的background.js读取控制台消息的位置?

时间:2012-04-21 07:59:41

标签: debugging google-chrome-extension console google-chrome-devtools

我刚开始使用谷歌Chrome扩展程序,我似乎无法从我的后台js登录到控制台。发生错误时(例如,由于语法错误),我也找不到任何错误消息。

我的清单文件:

{
  "name": "My First Extension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "pageCapture",
    "tabs"
  ]
}

background.js:

alert("here");
console.log("Hello, world!")

当我加载扩展程序时,警报出现但我没有看到任何记录到控制台的内容。我做错了什么?

7 个答案:

答案 0 :(得分:331)

你看错了地方。记录的控制台消息不会出现在网页中,而是出现在(不可见的)背景页面中。要在控制台中查看这些消息,请按照下列步骤操作:

访问chrome://extensions/ 您也可以右键单击扩展图标,然后单击“管理扩展”。

  1. 启用开发者模式
  2. 点击背景页面的链接(在“检查视图”中)。
  3. 将为此页打开开发者控制台。
  4. 新用户界面:

    enter image description here enter image description here

    旧UI:

    image

答案 1 :(得分:12)

我遇到了同样的问题,在我的情况下,Chrome Developer工具中的控制台选项卡中的日志记录设置为“全部隐藏”。 我甚至没有意识到这是一个选择,我不记得把它关掉

screenshot of setting in console tab in chrome dev tools

答案 2 :(得分:5)

另外

如果您想在 manifest.json

中查看content_script js文件(当"背景"未设置属性时)
"content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["popup.js"],
  }]

"browser_action": {
    "default_icon": "icon_32.png",
    "default_popup": "popup.html"
  }

然后右键单击在扩展程序图标上,然后点击检查弹出窗口,打开开发人员窗口并打开popup.html,在那里您会看到控制台标签。

答案 3 :(得分:3)

对于希望查看其chrome扩展程序的“内容脚本”的调试控制台的关注者,可以通过正常的“show developer console”进行操作,然后使用下拉箭头选择其“javascript环境”,然后选择“我可以访问它的方法等。

enter image description here

答案 4 :(得分:0)

类似于Michiel的回答,我也有一个有趣的控制台配置:我不记得设置的过滤器:

enter image description here

清除过滤器后,我看到了消息。

答案 5 :(得分:0)

我也有这个问题。好像我的网页没有更新到新保存的脚本。通过在Chrome浏览器中按Ctrl +刷新(或Ctrl + F5)可以解决此问题。

答案 6 :(得分:0)

如果我们想从弹出页面阅读打印到控制台的消息,我们可以单击扩展图标以打开弹出页面,然后在弹出页面的任何位置上单击鼠标右键,将显示一个下拉菜单,我们只需单击“检查”即可。 ”菜单打开开发者工具。请注意,弹出页面必须一直打开。如果已关闭(通过window.close()),则开发人员工具也将关闭。