How to use Firebug when debugging Javascript entailing focus/blur event handling

Question

I'm trying to use Firebug to debug some Javascript that entails blur and focus event handling, specifically some auto-complete/look-ahead functionality. The issue is that, merely by clicking on the various tabs within Firebug, such as "Console", "Script", "DOM", etcetera, the blur() event in my application is being fired, and then the focus() event when I subsequently click back in the text field that auto-complete is being driven by. The fact that these events are being unnecessarily being fired when trying to interact with Firebug, makes the debugging itself problematic if not well nigh impossible.

Has anybody else encountered this Catch 22, and/or does anybody have solutions/suggestions?

I'm trying to use the interactive debugger so console.log does me no good. You need to click the mouse and or press keys in order to do interactive debugging, and these trigger the blur() event in the browser — Dexygen, Feb 13 '10 at 09:41

score 0 · Answer 1 · answered Feb 12 '10 at 00:15

0

Could you switch them to debug. i.e. instead of using blur() and focus() use click() or hover().

answered Feb 12 '10 at 00:15

alex

479,566
201
878
984

score 0 · Answer 2 · answered Feb 12 '10 at 03:44

not sure about your question, but as Alex said, you can still use the console to log events and any other javascript things.

For example

var x =5;
console.info(x);
x = 9;
console.info(x);

Run this code in your javascript and you'll see it in the console.

score 0 · Accepted Answer · answered Mar 30 '10 at 20:27

0

Use keyboard instead? http://getfirebug.com/wiki/index.php/Keyboard_and_Mouse_Shortcuts

Also: ->options->show quick info box (then click inspect button) will show a capsule of info about everything you mouse over - if that helps

answered Mar 30 '10 at 20:27

plodder

2,304
18
19

Neither of these solutions work for situations where an element changes onfocus and again onblur -- in my case for instance I need to expand and view a newly created child element in the Source, but to do so would result in a "blur" event changing the state. Catch-22. – Brian Lacy May 18 '12 at 22:37
The keyboard shortcuts do not work unless the console is in focus, but to focus the console you need to click on it and trigger a blur. Is there a browser with globally active debug shortcuts? – ADJenks Nov 06 '20 at 23:58

score 0 · Answer 4 · answered Feb 12 '15 at 23:19

0

Had a similar experience trying to style a typeahead plugin. Best solution I found was right-clicking an element in the firebug dom and checking "break on child addition and removal" (you can also break on attribute change etc).

answered Feb 12 '15 at 23:19

Leopold Kristjansson

2,246
28
47

How to use Firebug when debugging Javascript entailing focus/blur event handling

4 Answers4