使用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文件是從網站的“源”選項卡中加載的，它很大，格式化后我們要說150k +行，並且加載需要一些時間。

現在誰能告訴我如何從源代碼中簡單地在js文件中添加一個斷點（使用CHROME EXTENSION），以便可以在操作時觸發它，然后將停止調試器，以便更改值等？

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，然后導航到“源”面板中的JS文件，並添加所需的斷點。 然后，刷新頁面以再次加載它-Chrome會記住您在何處設置斷點並在其處停止。

Answer 3

如果可以修改要調試的文件的源代碼，則可以使用debugger語句。

https://developer.mozilla.org/zh-CN/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

好的，開始時，您必須發送Command 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工具來選擇這些腳本並讓用戶進行調試，該過程可能會花費您一些時間:(

希望我朝着正確的方向指引您，祝您好運！