如何在调试 Chrome 扩展程序时查看来自 contentscript.js 的 debug() 消息答案

【问题标题】：How to see debug() messages from contentscript.js while debugging a Chrome extension如何在调试 Chrome 扩展程序时查看来自 contentscript.js 的 debug() 消息
【发布时间】：2020-09-23 19:27:31
【问题描述】：

我正在从 github 调试 Chrome 扩展。 (https://github.com/artemave/translate_onhover)

我想查看代码中的debug() 消息：就像这个...

--------来自 contentscript.js------------

const hit_text_node = getExactTextNode(text_nodes, e)
if (!hit_text_node) {
  debug('hit between lines')
  return ''
}

我试过了：

在网页上的 Chrome 中，我尝试右键单击详细，但它们没有出现。

我确实看到了来自 chrome://extensions background.js 的 devtools 的 console.log('jim103',word)

我也试过把这个词 debugger; 在这两个文件中，但它只是在 background.js 中造成了一个断点，而不是我寻求的调试消息......

我知道这两个文件是前后分开的……我只知道这些。

【问题讨论】：

标签： javascript google-chrome debugging dom-events

【解决方案1】：

JavaScript 没有一个名为 debug 的内置函数，它告诉我们它是一个自定义函数。我们也可以通过在调试期间尝试进入该功能（使用 F11 键）来解决这个问题。这导致我们试图找到它的定义——它位于文件的顶部：const debug = require('debug')('transover')。 require 的参数在这里不是路径，而只是一个名称，这一事实告诉我们这是一个包——转到package.json，它就是：“debug”：“^4.1.1”。默认情况下，NPM 包是从 npmjs.com 下载的，让我们去那里找到包 - https://www.npmjs.com/package/debug。它的文档告诉我们，在浏览器环境中，它的行为由 localStorage https://www.npmjs.com/package/debug#browser-support 控制。因此，您所要做的就是在特定站点的控制台中键入 localStorage.debug = 'transover*' 并重新加载页面。调试消息将开始出现在控制台中。

-ВИванов

有两个输出，back/front background.js 出现在 DevTools 中，但是 front=contentscript.js:debug() 东西出现在页面上。右键单击->检查并查看右侧。

【讨论】：