使用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工具來選擇該腳本並讓用戶進行調試，該過程可能需要一些時間:(

希望我已經把你引向了正確的方向，祝你好運！