使用chrome扩展调试源文件

Question

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

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

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

问题是我尝试调试的js文件是从sources选项卡里面的网站加载的,而且它很大,我们在格式化后说150k +行,加载需要一些时间.

现在任何人都可以告诉我如何从源代码中简单地在js文件中添加一个断点(USING CHROME EXTENSION),这样它就可以在动作上触发,然后停止调试器以便我可以更改值等等？

Answer 1

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

这里的工作版本JavaScript pause/resume -> background.js：

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

代码：

// 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"
  });
}

演示