CODEWITHSUNDEEP
google-chromegoogle-chrome-extensiongoogle-chrome-devtools
barcahead
barcahead

Reputation: 481

How to disable chrome extensions JS when debugging in devtools?

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?

Upvotes: 37

Views: 16495

Answers (6)

gavin
gavin

Reputation: 1346

explicity ignore list

open developer tools, then go to settings and then click on ignore list, and check the checkbox for add content script to ignore list, then add this to the ignore list: ^chrome-extension://

Upvotes: 8

t3t3c
t3t3c

Reputation: 11

I like to use Profiles for that.

While changing into incognito mode might help you to disable most of the extensions, some of them might be allowed and still run. For example I have DarkReader and Ublock enabled in incognito mode.

My favorite workaround is to use a "Guest" profile or to create a profile that you can use for debugging. I think it is easier than creating a Framework Ignore List inside of devtools.

How to create a profile: https://support.google.com/chrome/answer/2364824

Example: My debugging profile

Upvotes: 1

Firmin Martin
Firmin Martin

Reputation: 308

If you're using Google Chrome (or any Chromium-based browsers), simply run a new browser instance with a fresh user's data directory.

On Linux:

google-chrome --user-data-dir=$(mktemp -d)

This way, all extensions will be disabled without having to manually switch off/on them.

Upvotes: 0

Rob W
Rob W

Reputation: 348992

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.

Upvotes: 20

David d C e Freitas
David d C e Freitas

Reputation: 7511

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.

Upvotes: 18

Adam Ayres
Adam Ayres

Reputation: 8910

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.

Upvotes: -1

Related Questions