从 chrome devtools 扩展将调试器附加到工作人员答案

【问题标题】：Attach debugger to worker from chrome devtools extension从 chrome devtools 扩展将调试器附加到工作人员
【发布时间】：2021-06-19 00:28:56
【问题描述】：

我试图在我的 chrome devtools 扩展程序中拦截 ws 消息。

This question 帮助了我。这正是我需要的，但唯一的问题是它只有在从页面上下文发送 websocket 消息时才有效（我猜是因为调试器专门附加到该选项卡？）但在页面中我试图拦截ws 连接的消息是在 web worker 中建立的。

我的主要问题是，chrome devtools 扩展中有没有办法将调试器“附加”到网络工作者？或者我在这里遗漏了什么？

感谢您的帮助。

【问题讨论】：

我在这里创建了一个错误报告：bugs.chromium.org/p/chromium/issues/…
我一直在使用协议监视器检查 CDP 命令，似乎必须将调试器单独附加到工作人员。它们被视为单独的目标。 DevTools 正在使用目标域（例如 Target.setAutoAttach）

标签： google-chrome-extension websocket google-chrome-devtools chrome-devtools-protocol

【解决方案1】：

找到原因了。

我将无法使用chrome.debugger API 拦截页面中的 WebSockets 帧。

显然，扩展似乎无法访问通过 about:、data: 和 blob: 方案加载的上下文，我想拦截 WebSocket 帧在通过 blob url 加载的工作程序中建立连接。

这也是FF中的一个bug：
https://bugzilla.mozilla.org/show_bug.cgi?id=1475831

【讨论】：

【解决方案2】：

在这种情况下，工人被视为与 tabId 目标相关的不同目标：https://chromedevtools.github.io/devtools-protocol/tot/Target/#method-setAutoAttach

要从 Workers 接收 WebSocket 事件，首先应该发送 'Target.setAutoAttach' 命令，然后监听 'Target.attachedToTarget' 事件，然后将调试器附加到 Workers，如下所示：

const version = '1.3';

async function onAttach(debuggeeId) {
  /** Enable receiving 'Target.attachedToTarget' events */
  await chrome.debugger.sendCommand(debuggeeId, 'Target.setAutoAttach', {
    autoAttach: true,
    waitForDebuggerOnStart: true,
    flatten: true,
  }); //
  /** Enable Network events for the current tab */
  chrome.debugger.sendCommand(debuggeeId, 'Network.enable');
}

function allEventHandler(debuggeeId, message, params) {
  /** When workers are created, 'Target.attachedToTarget' events are fired */
  if (message === 'Target.attachedToTarget') {
    /** Attach debugger to workers */
    chrome.debugger.attach(
      { targetId: params.targetInfo.targetId },
      version,
      () => {
        /** Enable Network for workers to receive WebSocket events */
        chrome.debugger.sendCommand(
          { targetId: params.targetInfo.targetId },
          'Network.enable'
        );
      }
    );
  } else {
    console.log(message, params);
  }
}

chrome.debugger.onEvent.addListener(allEventHandler);

/** Click extension icon to attach debugger to the current tab */
chrome.action.onClicked.addListener(function (tab) {
  const tabId = tab.id;
  const debuggeeId = { tabId };
  chrome.debugger.attach(debuggeeId, version, onAttach.bind(null, debuggeeId));
});

【讨论】：