Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect when is Firebug (or any other web-debugger) used for debugging

I have a Javascript application that relies on capturing keyboard events in a textarea. While testing and debugging it on Firefox (14.x) with firebug (1.10.2) I noticed that my application behaves differently when I have breakpoints active and the debugger is working.

I know how to detect Firebug but I would like to know if it is possible to detect (with Javascript) when the Firebug is actually used for debugging?

Edit: here is an example on some random site

This site catches the key event in an input box, prints out character code and replaces the pressed key with a text representation (ie. "enter" for enter key) or an uppercase (if a letter).

When I debug it with Chrome and place a breakpoint on the listener function, nothing happens when the breakpoint is reached (as expected), when I resume the script the text is printed out as normal.

When I debug it with Firebug on Firefox: Let us say that previously I pressed the "e" letter and the input bar contains text "E". I turn on the breakpoint and press letter "z". Firebug stops at the breakpoint but the input bar now has text "Ez" instead of "E". When I resume the script, this text is replaced with "Z" as expected.

I tried out another Firefox debugger (Venkman 0.9.89) and the same thing happened. So my guess is this is a Firefox problem, not the debugger problem. So the question might be more general, can it be detected when is the Javascript code being debugged?

like image 749
Bikush Avatar asked Aug 15 '12 09:08

Bikush


2 Answers

This is what I do to detect Firebug:

if (window.console && (window.console.firebug || window.console.exception)) {
  // At this point, Firebug is enabled
}

The first test is important to make sure that the console actually exists The second one will test for Firebug, although it will only work for older versions of it. The third one is there as Firebug adds the "exception" This is because the property "exception" is added by Firebug's plugin.

(Unrelated but interested: window.console.exception is the method used by Firebug to display a message onto the console. For example, type:

>>> window.console.exception("A message", {param:'Value'})

You will see an error that will look very familiar, with a dump of the passed object!

Merc.

like image 148
Merc Avatar answered Nov 01 '22 16:11

Merc


Well, hope this answer will help someone.

Let function we debug to be such as:

function debugged()
{
   debugger;
}
setTimeout(debugged, 3000);

add this debug detection code is:

setTimeout(this.x = function(a){ s = Math.abs(new Date() - a.c - 1000); a.c = new Date(); setTimeout(a.foo,1000, a); if(s>100)console.log("debug") },1000, {c: new Date(), foo:this.x})

so if we run it in some place and open debugger, it will trigger breakpoint and debug event will be catched(you can see it by "debug" word appearing in console). This is a concept, you may change detection period time and a way of raising debug flag. Thanks to single-threaded javascript.

like image 44
FLCL Avatar answered Nov 01 '22 15:11

FLCL