2

What is changed, from the point of view of running AJAX application, when the IE Developers Tools are opened?

I'm tracing now some Schrödinger bug. It's about dropdown lists from PrimeFaces in IE. They are sometimes not opening after click, and they got 'unblocked' after one maximizes browser or unzooms the content. Because those dropdowns are realized on the basic of normal input, with attached div, I supposed it's something with wrongly calculating the place to show that dropdown popup. I've also supposed AJAX errors.

But after opening IE Developers Tools it's hardly possible to reproduce the error. No error is showed in console, no AJAX request hangs, and, what's more, everything seems to function more.

The error is only for IE, so the developers tools are the only way to debug it. However, when they are opened, it seems that the observation changes the state somehow, like in quantum mechanics...

So, I need to know, what could be changed by opening those developers tools, that prevents the bug from showing up?

--edit-- It has nothing to do with console.log. It is the problem with calculating the size of invisible elements. The problem was solved by adding scroll to the body. However, the question is open, how the IE Developers Tools were influencing those calculations.

Danubian Sailor
  • 1
  • 38
  • 145
  • 223
  • Do you have a live example? Which version of IE are you using? And do you have any breakpoints set? – MarcoK Jan 31 '13 at 14:00
  • 2
    Do you have any console output in your script (`console.info(somevar)`)? That would cause an exception in IE when the Developer Tools are not opened. – hsan Jan 31 '13 at 14:01
  • 1
    It's quantum entanglement, and every time you open your console, some other developer's code gets buggy as hell elsewhere in the galaxy. – Michael Berkowski Jan 31 '13 at 14:01
  • No living example, IE9, I don't have non-obfuscated version of primefaces js, and anyway, to set breakpoint I'd have to open developers tools and when they are open, the bug doesn't happen. So I'd like to start with theoretic approach - what could the opening of dev tools change? – Danubian Sailor Jan 31 '13 at 14:02
  • I have something like this: if (console && console.log) { console.log(msg); } but actually, the bug appears in places where that is not called – Danubian Sailor Jan 31 '13 at 14:04
  • 1
    `if (console)` gives me an error in IE9 ('console is undefined'). `if (window.console)` works. – hsan Jan 31 '13 at 14:21
  • However, the proplem exists even when console was never called, so maybe I've added some noise now – Danubian Sailor Jan 31 '13 at 14:26
  • 1
    IE only defines the `console` object when dev tools is open. Prior to that, `console` is undefined. This is almost certain to be the cause of the problem. Best answer is to remove `console` code unless you are specifically using it. Other than that, it shouldn't make any other difference. (reference: winning answer here http://stackoverflow.com/questions/7742781/ie9-bug-javascript-only-works-after-opening-developer-tools-once-very-stran/) – SDC Jan 31 '13 at 14:35
  • Does the problem occur when you navigate to the page with the dev tools running? Or the dev tools detached from the browser? Since opening the dev tools usually also changes the available space for the page to render in maybe it has something to do with the resize event being triggered... – hsan Jan 31 '13 at 14:38
  • To make it even more challenging, now I can't trigger that error when running the app without frameset. Unfortunatelly, it is launched in frameset on enterprise portal. – Danubian Sailor Jan 31 '13 at 14:38
  • No, dev tools are runned in separate window, but in fact frameset makes theapplication viewport smalled as normally. – Danubian Sailor Jan 31 '13 at 14:41

1 Answers1

1

If you really want to always include using console, I suggest using a polyfill for it:

(function(b){
    var a=0;
    var c=function(){};
    var d=["log","assert","clear","count","debug","dir","dirxml","error","exception","group","groupCollapsed","groupEnd","info","profile","profileEnd","table","time","timeEnd","timeStamp","trace","warn"];
    b.console=b.console||{};
    for(;a<d.length;a++){
        b.console[d[a]]=b.console[d[a]]||b.console["log"]||c;
    }
})(window);

This a minified example that I tried to make readable. It's something I found awhile ago and modified some. I think the main thing I modified is that if you call a method that wasn't originally implemented by the browser's native console, it will call console.log. If console.log wasn't natively implemented, it just calls an empty function. The original version of this code didn't include this fallback to console.log.

This will "guarantee" that console calls will not fail. You can change the d variable to only include calls you are sure you will use, otherwise there's some extra unnecessary processing.

Ian
  • 50,146
  • 13
  • 101
  • 111
  • @lechlukasz Right, but someone said they get an error when they use `if (console)`, which is what you actually have (not this). The code above uses a different path. It seems pretty sure that the problem is with `console` though. Close out of IE completely, and open back up with your original code that was giving you problems. Don't open Developer Tools at all, and see if you're still getting the problem (you said it started happening at weird times now). I'm not sure how IE handles caching between sessions, so if your JS is in an external file, you may want to clear the cache for good measure – Ian Jan 31 '13 at 15:49
  • But how the maximizing of the browser window would solve the problem if it was with console? – Danubian Sailor Jan 31 '13 at 16:04