代码之家 › 专栏 › 技术社区 › user1592380

没有输出到带有chrome.devtools扩展的控制台

chrome-extension-manifest-v3 google-chrome-devtools javascript

user1592380 · 技术社区 · 1 年前

我正努力跟上 https://betterprogramming.pub/chrome-extension-intercepting-and-reading-the-body-of-http-requests-dd9ebdf2348b 创建一个devtools面板,以便获取网站上特定帖子请求的响应。我已经从本文第二部分的说明开始,创建一个基本的devtools面板(看起来可以工作)。接下来,我在上讨论了devtools.network API https://developer.chrome.com/docs/extensions/reference/api/devtools/network#type-Request . 我决定尝试使用getHAR()函数获取网络请求( https://developer.chrome.com/docs/extensions/reference/api/devtools/network#method-getHAR ).

下面是manifest.json:

{
  "manifest_version": 3,
  "name": "Extension",
  "version": "1.0",
  "description": "Description",
  "devtools_page": "devtools.html"
}

devtools.html:

<script src="devtools.js"></script>

devtools.js:

chrome.devtools.panels.create("MyPanel", null, 'panel.html');

panel.html:

<html>
    <body>
        <script src="panel.js"></script>
    </body>
</html>

panel.js:

  chrome.devtools.network.getHAR(
   function (harLog) {

    console.log('my output');
    console.log(harLog);

  }
);

如果我去 https://developer.mozilla.org/en-US/docs/Web/API/setTimeout 当devtools窗口打开并重新加载页面时,我在控制台中没有看到来自扩展的输出,也没有看到错误chrome://extensions.我做错了什么?

1 回复 | 直到 1 年前

CherryDT Ravi Shankar 1 年前

我想你看的不是DevTools本身的控制台(这是你登录的地方),而是你打开DevTools的主网站的控制台。您的代码在DevTools窗口中运行,不在扩展后台页面中运行,也不在主网站中运行。

打开DevTools为 未对接窗口 ^1. 然后在DevTools窗口中按Ctrl+Shift+I打开 另一个 针对其他DevTools(而非网站)的DevTools窗口。

如果您输入 location.href 在中新 DevTools窗口中,您将看到一个URL,例如 devtools://devtools/bundled/devtools_app.html?remoteBase=https://chrome-devtools-frontend.appspot.com/serve_file/@31f8248cdd90acbac59f700b603fed0b5967ca50/&can_dock=true&targetType=tab&veLogging=true ,表示您现在正在查看一个正在调试另一个DevTools窗口的DevTools窗口,这就是您需要查看记录在第一个DevTools窗的上下文中的控制台输出的内容。

总之,我们有:

网站example.com
DevTools步骤1中的调试example.com
DevTools B从步骤2调试DevTools A

如果example.com中的代码使用 console.log ,它显示在步骤2中的DevTools A中。但是如果DevTools A中的代码(例如您的自定义面板)使用 console.log ,它显示在步骤3的DevTools B中。

(是的,如果你想在调试另一个DevTools窗口时调试面板上的问题,你可以打开一个新的DevTools C窗口来继续你的DevTools体验,调试DevTools B,它调试DevTools a,它调试example.com…玩得开心。)

推荐文章

user1592380 · 没有输出到带有chrome.devtools扩展的控制台

1 年前

ubi sage · chrome开发工具下的网络选项卡中的内容下载或邮递员内部的下载时间对于小于1mb的少量数据需要很长时间

1 年前

Vrushabh Ranpariya · 谷歌Chrome-开发工具-网络选项卡:设计更新

1 年前

user1763684 · Deno:如何在子进程完成之前运行shell命令并读取输出?

2 年前

Norem · ChromeDevTools SetVariableValue:如何更改对象属性?阵列单元?

2 年前

repka · 如何在浏览器开发工具控制台中加载NPM包?

2 年前

Jens G. · 使用控制台代码更改HTML文本框值

2 年前

Zoran · Chrome DevTools-应用程序选项卡-本地存储中的更改密钥

2 年前

Radha · 警告:找不到用于版本114的CDP版本

2 年前

João Otero · 我在这个Javascript数组行为中遗漏了什么?[副本]

3 年前