使用 chrome 扩展调试源文件

Question

我正在尝试使用 Chrome 扩展程序控制调试器。

我正在使用devtools-protocol 和chrome extension 文档，但我不知道如何实现它们，因为我没有看到任何正在使用的方法示例。我使用了来自here 的示例扩展，它只显示了如何暂停和恢复调试器，但这对我来说绝对没有用。我尝试在示例中实现一些方法，但没有任何反应。

function onDebuggerEnabled(debuggeeId) {
  chrome.debugger.sendCommand(debuggeeId, "Debugger.setBreakpointByUrl", {
        lineNumber: 45825,
        url: 'full https link to the js file from source tab'
  });
}

问题是我尝试调试的 js 文件是从源选项卡内的网站加载的，它很大，我们在格式化后谈论 150k+ 行，并且需要一些时间来加载。

现在谁能告诉我如何简单地从源代码（使用 CHROME EXTENSION）在 js 文件中添加一个断点，以便在操作时触发它，然后停止调试器以便我可以更改值等？

Answer 1

也许您放置了错误的断点位置（格式化源），尝试使用原始源并添加columnNumber: integer

这里是工作版本JavaScript pause/resume -> background.js:

• 安装此扩展程序
• 打开https://ewwink.github.io/demo/Debugger.setBreakpointByUrl.html
• 单击调试器暂停按钮
• 点击按钮“调试我！”
• 它将在第 10 行的 https://ewwink.github.io/demo/script.js 处命中断点
• 单击调试器继续按钮，您将看到消息变量“hijacked...”

代码：

// Copyright (c) 2011 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// mod by ewwink

var attachedTabs = {};
var version = "1.1";

chrome.debugger.onEvent.addListener(onEvent);
chrome.debugger.onDetach.addListener(onDetach);

chrome.browserAction.onClicked.addListener(function(tab) {
  var tabId = tab.id;
  var debuggeeId = {
    tabId: tabId
  };

  if (attachedTabs[tabId] == "pausing")
    return;

  if (!attachedTabs[tabId])
    chrome.debugger.attach(debuggeeId, version, onAttach.bind(null, debuggeeId));
  else if (attachedTabs[tabId])
    chrome.debugger.detach(debuggeeId, onDetach.bind(null, debuggeeId));
});

function onAttach(debuggeeId) {
  if (chrome.runtime.lastError) {
    alert(chrome.runtime.lastError.message);
    return;
  }

  var tabId = debuggeeId.tabId;
  chrome.browserAction.setIcon({
    tabId: tabId,
    path: "debuggerPausing.png"
  });
  chrome.browserAction.setTitle({
    tabId: tabId,
    title: "Pausing JavaScript"
  });
  attachedTabs[tabId] = "pausing";
  chrome.debugger.sendCommand(
    debuggeeId, "Debugger.enable", {},
    onDebuggerEnabled.bind(null, debuggeeId));
}

function onDebuggerEnabled(debuggeeId) {
  chrome.debugger.sendCommand(debuggeeId, "Debugger.setBreakpointByUrl", {
    lineNumber: 10,
    url: 'https://ewwink.github.io/demo/script.js'
  });
}

function onEvent(debuggeeId, method, params) {
  var tabId = debuggeeId.tabId;
  if (method == "Debugger.paused") {
    attachedTabs[tabId] = "paused";
    var frameId = params.callFrames[0].callFrameId;
    chrome.browserAction.setIcon({
      tabId: tabId,
      path: "debuggerContinue.png"
    });
    chrome.browserAction.setTitle({
      tabId: tabId,
      title: "Resume JavaScript"
    });
    chrome.debugger.sendCommand(debuggeeId, "Debugger.setVariableValue", {
      scopeNumber: 0,
      variableName: "changeMe",
      newValue: {
        value: 'hijacked by Extension'
      },
      callFrameId: frameId
    });
  }
}

function onDetach(debuggeeId) {
  var tabId = debuggeeId.tabId;
  delete attachedTabs[tabId];
  chrome.browserAction.setIcon({
    tabId: tabId,
    path: "debuggerPause.png"
  });
  chrome.browserAction.setTitle({
    tabId: tabId,
    title: "Pause JavaScript"
  });
}

演示

Answer 2

编辑：刚刚看到您对此的评论是针对您正在编写的自定义扩展。我的回答对你没有帮助（对不起！），但它可能会帮助那些来这里寻找在 Chrome 中设置正常断点的方法的人。

---

也许您已经这样做了，但是...您是否尝试过仅单击要设置断点的行的行号？

像这样：

您甚至可以在同一行的多个不同调用中启用或禁用断点。

页面加载完毕后，使用 F12 打开 Dev Tools，然后导航到 Sources 面板中的 JS 文件，并添加所需的断点。然后，刷新页面以再次加载它——Chrome 会记住您设置断点的位置并停止。

Answer 3

如果您可以修改要调试的文件的源代码，我会使用调试器语句。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

function potentiallyBuggyCode() {
    debugger;  //application will break here as long as chrome developer tools are open
}

Answer 4

function breakhere() {
    debugger;
}

Answer 5

好的，首先你必须发送命令Debugger.enable .. 像这样：

var tabId = parseInt(window.location.search.substring(1));

window.addEventListener("load", function() {
  chrome.debugger.sendCommand({tabId:tabId}, "Debugger.enable");
  chrome.debugger.attach( tabId, "0.1" );
  chrome.debugger.onEvent.addListener(onEvent);
});

然后在你的 onEvent 中你可以设置断点

function onEvent(debuggeeId, message, params) {
  if (tabId != debuggeeId.tabId) return;
  var res = Debugger.setBreakpointByUrl( 2, 'url-of-the-script-file' );
}

我强烈建议检查此页面上的嗅探部分：https://chromedevtools.github.io/devtools-protocol/，因为我能够看到通过 WS 协议返回的 json，这将帮助您做几乎任何您想做的事情.. 我可以' t构建你的完整扩展，你是你自己的人，

我想您需要添加某种 DOM elemnet 以及您将从 Network.getResponseBody 解析的脚本列表，然后使用某种 UX 工具来选择该脚本并让用户进行调试，该过程可能会花费您一些时间时间：（

希望我已经把你引向了正确的方向，祝你好运！