使用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
• 单击调试器暂停按钮
• 单击按钮“调试我！”
• 它会打到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" 
    }); 
} 

演示

Answer 2

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

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 3

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

---

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

像这样：

你甚至可以启用或在同一条线上的几个不同的呼叫禁止断点。

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

Answer 4

function breakhere() { 
    debugger; 
} 

Answer 5

确定，为启动你必须sendCommand 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，这将帮助你漂亮的做很多你想要的东西..我不能让你完全扩展，你是在你自己的人，

我想你需要添加一些DOM elemnet与脚本列表，你会解析从Network.getResponseBody和然后使用某种UX工具来选择该脚本并让用户进行调试，该过程可能需要一些时间:(

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