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

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.