Execute JS code only in debug mode

Question

Is it posible to execute part of a js file only when I have the developer tools opened?

I want something like

#if DEBUG
executeMethodOnlyInDebugger();
#endif

but for JavaScript.

Well, you could always set your own flags inside the code, and just switch the value when you need to debug. — MinusFour, Oct 19 '15 at 14:36
this is a duplicate of: http://stackoverflow.com/questions/16765287/how-to-check-if-chrome-dev-tools-are-opened — Saar, Oct 19 '15 at 14:37
That would be nice, but you'd never be able to rely on all browsers doing the same thing. Safer to just set the flag manually. — , Oct 19 '15 at 14:38
That duplicate is specific to Chrome (and is now outdated). I think the OP wants to know if there's some standardized way. — , Oct 19 '15 at 14:43

Jamiec · Accepted Answer · 2015-10-19T14:41:59.650

2

No, there is no conditional compilation natively in javascript.

edited Oct 19 '15 at 14:41

answered Oct 19 '15 at 14:38

Jamiec

133,658
13
134
193

2

I don't think conditional compilation is relevant here. If he wants code to run (or not) based on the state of the dev tools, that would be a runtime effort. He's basically looking for a standard boolean flag. – Oct 19 '15 at 14:47
1

@squint the code posted is akin to c#'s preprocessor directives, which is a form of conditional compilation. That the condition is "Is the devtools open" is sort of irrelevant. – Jamiec Oct 19 '15 at 14:49
I guess it depends on context. He didn't explicitly relate it to anything specific but I get your point. I can't tell for sure if he wants it activated when the tools open or not. – Oct 19 '15 at 14:51

score 2 · Answer 2 · edited May 23 '17 at 12:02

2

Not really. But you can use devtools-detect for that. See the following answer: enter link description here

edited May 23 '17 at 12:02

Community

1
1

answered Oct 19 '15 at 18:10

Yuval Zilberstein

175
1
4
11

score 1 · Answer 3 · answered Oct 19 '15 at 14:40

1

Try this library: https://github.com/sindresorhus/devtools-detect

It does some inspection of the window object and emits an event when it detects the console has opened. I would probably be wary of including this in production code but it could make for a useful debugging tool in your use case.

answered Oct 19 '15 at 14:40

Alastair

1,710
2
17
33

Maybe that worked once, but it certainly doesn't work now (on Chrome, or on Firefox with the built-in debugger). [This issue](https://github.com/sindresorhus/devtools-detect/issues) suggests it doesn't work for Firebug, either, at least not reliably. – T.J. Crowder Oct 19 '15 at 14:44
@T.J.Crowder it works for me in Chrome 45 and Safari 9: http://sindresorhus.com/devtools-detect/ Edit: Just updated Chrome to 46 and it still works – Alastair Oct 19 '15 at 14:51
Works for me in FF, although as expected doesnt detect an undocked devtools. – Jamiec Oct 19 '15 at 14:52
Either way, I agree with the other posters that the most robust method would be to set your own debug flag (you could even control it via the query string or a hash fragment or something for convenience) – Alastair Oct 19 '15 at 14:57
2

It does work for me on Chrome, turns out, but **only** if devtools are docked (so, rather like the Firefox bug). Same with Firefox. And the end of the day: Not reliable, not to be used. – T.J. Crowder Oct 19 '15 at 15:01

score 1 · Answer 4 · edited May 23 '17 at 12:10

1

I dont think there is a way to check for that in Chrome and Firefox. The best bet is to have a debug flag in your code.

Although IE gives console as undefined when developer tool is not open. So for IE you can just do:

if(console){
  //dev tools is open
} else{
  //dev tools not open
}

Also have a look here for more info on chrome: Find out whether Chrome console is open

edited May 23 '17 at 12:10

Community

1
1

answered Oct 19 '15 at 14:41

shinobi

2,511
1
19
27

score 1 · Answer 5 · answered Apr 15 '20 at 18:59

For ASP.NET

In _Layout.cshtml (for MVC) or Master (for web forms), add the following:

<script>
    @if (HttpContext.Current.IsDebuggingEnabled)
    {
    @:var DEBUG = true;
    }
    else
    {
    @:var DEBUG = false;
    }
    alert('DEBUG: ' + DEBUG);
</script>

The beauty of this is that you can turn it on/off using a configuration value in Web.config to allow debugging in any environment:

<system.web>
    <compilation debug="false" />
</system.web>

Execute JS code only in debug mode

5 Answers5