javascript - Debugging source files using chrome extension - Stack Overflow

admin管理员组

文章数量:1322172

I am trying to control the debugger using Chrome Extension.

I am using devtools-protocol and chrome extension documentation, but I have no idea how to implement them as I have not seen any samples of the methods in use. I used the sample extension from here which shows how to pause and resume the debugger only, but that's absolutely no use to me. I tried to implement some methods in the sample, but nothing happens.

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

The problem is that the js file I am trying to debug is loaded from the website inside the sources tab and it's huge, we talking 150k+ lines after its been formatted and it takes some time to load.

Now can anyone tell me how to simply add a break point inside the js file from the sources (USING CHROME EXTENSION) so it could be triggered on action which will then stops the debugger so I could change values etc?

I am trying to control the debugger using Chrome Extension.

I am using devtools-protocol and chrome extension documentation, but I have no idea how to implement them as I have not seen any samples of the methods in use. I used the sample extension from here which shows how to pause and resume the debugger only, but that's absolutely no use to me. I tried to implement some methods in the sample, but nothing happens.

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

The problem is that the js file I am trying to debug is loaded from the website inside the sources tab and it's huge, we talking 150k+ lines after its been formatted and it takes some time to load.

Now can anyone tell me how to simply add a break point inside the js file from the sources (USING CHROME EXTENSION) so it could be triggered on action which will then stops the debugger so I could change values etc?

• javascript
• google-chrome-extension

Share Improve this question Follow edited Dec 15, 2017 at 14:49 Cœur 38.8k2626 gold badges205205 silver badges277277 bronze badges asked May 28, 2017 at 19:15 UndefinedUndefined 76422 gold badges1212 silver badges3939 bronze badges 8

• 1 Did you try to use word "debugger" in you javascript? – Red Devil Commented May 28, 2017 at 19:32
• this funtion is taken from extention folder. Like I said, I am trying to add a break point using chrome extention – Undefined Commented May 28, 2017 at 19:44
• First you need to attach the debugger. As for the mand, see the sniffing the protocol part in documentation. Also you can inspect extensions that use chrome.debugger. – woxxom Commented May 29, 2017 at 6:49
• Debugger is attached, this function is just taken from an entire js file. I just have no idea how to set the breaking point to a js file which is loaded up inside sources by the website.. – Undefined Commented May 30, 2017 at 12:56
• Can you give more context? Are you trying to debug a content script file? What do you mean by loaded in the source tab? Is it just regularly loaded js file or some sort of dynamically fetched script ? If possible can you give the url of the source file if not under NDA? – Karen Grigoryan Commented May 30, 2017 at 21:30

 |  Show 3 more ments

5 Answers 5

Sorted by: Reset to default 2

Maybe you are placing wrong breakpoint location (formatted source), try working with original source and add columnNumber: integer

and here working version JavaScript pause/resume -> background.js:

• install this extension
• open https://ewwink.github.io/demo/Debugger.setBreakpointByUrl.html
• click debugger pause button
• click button "Debug Me!"
• it will hit breakpoint on https://ewwink.github.io/demo/script.js at line 10
• click debugger continue button, you will see message variable "hijacked..."

the code:

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

demo

EDIT: Just saw your ment about this being for a custom extension you're writing. My answer won't help you (sorry!), but it might help people that e here looking for a way of setting normal breakpoints in Chrome.

---

Maybe you already did, but... Have you tried just clicking the line number of the line you want to set the breakpoint in?

Like this:

You can even enable or disable breakpoints in several different calls in the same line.

When the page is loaded, open Dev Tools with F12, then navigate to the JS file in the Sources panel, and add the breakpoints you want. Then, refresh the page to load it again -- Chrome will remember where you set the breakpoints and stop at them.

If you can modify the source code of the file that you want to debug, I would look use the debugger statement.

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

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

function breakhere() {
    debugger;
}

ok, for start you have to sendCommand Debugger.enable .. something like this:

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

then inside you onEvent you can set breaking points

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

I would strongly suggest to check the sniffing section on this page: https://chromedevtools.github.io/devtools-protocol/ because I was able to see the json that get returned via WS protocol and that will help you to do pretty much anything you want.. I can't build you full extension, you are on your own man,,

I guess that you need to add somekind of DOM elemnet with list of scripts that you'll parse from Network.getResponseBody and then somekind of UX tool to pick that scripts and let users to debugging,, that process could take you some time :(

hope I have steered you in the right direction, good luck!

本文标签： javascriptDebugging source files using chrome extensionStack Overflow