How to disable chrome extensions JS when debugging in devtools?

Question

When I add mouse event breakpoint, devtools always jump into extension's JS.

Is there any way to point to my mouse event code directly?

Answer 1

I think the simplest way is to open an incognito window (Ctrl-Shift-N) (or Cmd-Shift-N for mac) and debug in there, because then there will be no extensions loaded (by default).

I know what you mean by this question: when debugging, and doing something simple like pausing execution, you always find it breaks into one of the extension's codes instead of the current webpage's code.

Answer 2

The only way to disable the script (e.g. to avoid side-effects) is by disabling the extension (for instance, by using incognito mode if the extension is not enabled in incognito mode).

If you don't mind the scripts to run, but want to ignore extension code, then you can use the script blackboxing feature of Chrome's devtools.

If you never develop extensions and aren't interested in stepping through it, then open the settings menu of the devtools, click on Blackboxing and then the "Blackbox content scripts" checkbox:

If you only want to selectively ignore files, then you can also right-click on the source of the file that you want to ignore, and click on the "Blackbox Script" contextmenu option. To remove the pattern, go to the "Blackboxing" settings panel as shown before.

Answer 3

First off you should probably review the tutorial on how to debug chrome extensions here:

http://code.google.com/chrome/extensions/tut_debugging.html

When in doubt, you can always use the debugger keyword directly in the JavaScript code where you want to launch the debugger from, like so:

element.addEventListener("mouseover", function() {
    debugger;
    // some JS handler code...
});

Depending on if your JS is in a popup, background page, or in a content script, you will need make sure you launch the dev tools from the right place.

For a popup, you need to right click on the extension icon and "Inspect Popup" and then from the JavaScript console you would need to run location.reload(true)

For a background page, you need to go to the extensions settings page, chrome://settings/extensions, turn on developer mode, expand the extension in question and click the background page link.

The content script should be visible directly from the page it is loaded onto.