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

Question

I have a Javascript application that relies on capturing keyboard events in a text box. By checking and debugging it on Firefox (14.x) with firebug (1.10.2), I noticed that my application behaves differently when I have breakpoints 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 Firebug is really used for debugging?

Edit: here is an example on some random site

This site catches the key event in the input field, displays the character code and replaces the pressed key with a text representation (ie "enter" to enter the key) or in upper case (if there is a letter).

When I debug it using Chrome and put a breakpoint in the listener function, nothing happens when the breakpoint is reached (as expected), when I return to the script, the text prints as usual.

When I debug it from Firebug to Firefox: let's say that I previously pressed the letter "e" and the input panel contained the text "E". I turn on the breakpoint and press the letter "z". Firebug stops at a breakpoint, but the input panel now has the text "Ez" instead of "E". When I resume the script, this text is replaced with "Z", as expected.

I tried another Firefox debugger (Venkman 0.9.89) and the same thing happened. Therefore, I assume this is a Firefox problem, not a debugger problem. So the question may be more general, can it be detected when debugging Javascript code?

Answer 1

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 ensure that the console actually exists. The second will test Firebug, although it will only work for older versions. The third is where Firebug adds an “exception”. This is because the “exception” property is added by the Firebug plugin.

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

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

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

Merc.

Answer 2

Ok, hope this answer helps someone.

Let the debug function be like:

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

add this debug detection code:

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

therefore, if we run it in some place and open the debugger, it will trigger a breakpoint and a debugging event (you will see it with the "debug" word that appears on the console). This is a concept, you can change the detection period time and the way to raise debug flags. Thanks to single threaded javascript.