How many times have you been developing in javascript and said “I’ll just pop it in an alert”, alt-tab, refresh and then the sudden sinking feeling as you realise that you’re about to get 300 alert popups?
Damn! Now you have to sit there and press OK a bajillion times, or restart the browser – which is a pain because you’ll lose all your tabs, and more importantly you’ll lose your concentration while you load everything up again.
We’ve all been there. But recently I found a neat little trick to break out of infinite javascript alert loops in firefox:
Of course in Chrome it’s easy, there’s a tickbox on the alert popup! (and I hope other browsers follow suit)
But in firefox sadly we have no such luxury:
So how do you get rid of alert popups in firefox?
- Hold Ctrl
- Hold Enter
- Press F4 once
That’s it – the tab will close, you’ll get one final alert and then you’ll be free!
Try it out here (in a new tab)
spacer
Doesn’t work in MSIE, sadly. Although it did work in IETester when I tried it there. Also I have reports of it not working in firefox under linux or mac.
Of course, the *real* solution is to use console.log(); and firebug instead – they say if you play with fire you’ll get burned but in this case fire(bug) can really save your ass.
Repeat after me:
console.log is safer than alert because it doesn’t lock up the whole browser. I will use console.log instead of alert for debugging in the future. I will now link to puremango.co.uk
Hey thanks for the link, man ;)
For those of you who’ve never used console.log, you’re in for a real treat. Compare the difference on an onclick event between alert (which simply calls .toString() on its arguments) and console.log (which dumps the actual object itself):
alert(window.event);
console.log(window.event);
Now that’s more useful to start with. But we can even click that logged text and it jumps to a tree view of the entire object:
I certainly know which I’d rather be using!
Finally, an additional benefit is that console.log won’t lock up the GUI; so if you do have your debug call inside a big loop it’ll merrily log them all; meaning you can close the tab if it’s infinite, or just wait for the loop to finish if it’s merely big.
You will however need to have the firebug window open, otherwise your script won’t execute. And that’s why we all sometimes resort to the tried and true alert(); method of debugging. And next time your heart sinks because you forgot that your loop has hundreds of iterations, remember the magic incantation: Ctrl, Enter, F4.
And happy debugging :)
UPDATE: hey look, a firefox extension that adds a tickbox to alert dialogs. Neato.
#1 by Tom on February 17, 2010 - 1:22 am
Phew! Great tip :)
And Firebug FTW! How long do you reckon it’ll be before Firebug is ported to Chrome?
#2 by Howard Yeend on February 17, 2010 - 1:28 am
Oh God I wish! I think that might even be enough to make me make the change to Chrome as my main browser.
#3 by Ben on February 17, 2010 - 3:41 am
Chrome developer tools, whilst perhaps not as complete as Firebug, are still pretty good. I’ve found myself developing more in Chrome recently as FF has a tendency of letting you get away with stuff that doesn’t work in other browsers(and not just IE).
#4 by kpobococ on February 17, 2010 - 9:00 am
Latest Chrome version has a pretty decent developing tools. They even have stuff that firebug does not have yet.
#5 by Sylvain on February 17, 2010 - 3:54 am
Oh ! Thanks for the tips, very useful.
By the way, it works with Opera (even if it’s less interesting as Opera has, just like Chrome, a tickbox on alert popups to stop executing javascript)
#6 by Adam on February 17, 2010 - 8:57 am
It does not appear to work on Firefox for Mac. When I hold Ctrl+Enter and press F4, it just switches to a different application. Tried Cmd+Enter and Opt+Enter instead, none worked.
#7 by Howard Yeend on February 17, 2010 - 9:25 am
Hmm, how do you close tabs via the keyboard on a mac?
#8 by Florian Cargoet on February 17, 2010 - 8:57 am
Doesn’t work for me. Maybe, the magic incantation is different on Linux. Anyway, I can click on the close tab button between two alerts and it closes (with one final alert too).
#9 by adamnfish on February 17, 2010 - 8:58 am
It doesn’t work in FF3.6 pre (Namoroka) on Linux which is really annoying. Can you change the number of popups down to 20 or something? It still works for the purpose of testing this trick, but doesn’t annoy people quite as much if it fails…
Cheers
#10 by Howard Yeend on February 17, 2010 - 9:30 am
have changed to 50 – sorry if I killed your browser ;0) Thanks for letting me know.
#11 by kpobococ on February 17, 2010 - 8:59 am
Oh, come on, stop living in the stone age:
var mylog = function(whatever) {
if (window.console && console.log) console.log(whatever);
}
#12 by Howard Yeend on February 17, 2010 - 9:40 am
I did say pretty much that in the post, you know ;-P
(edit: but yes, your solution negates the “script won’t execute” problem I mentioned)
edit:
actually, I prefer:
if(!console) { // provide some rough kind of console behaviour var console = function(){ var my = { log: function(stuff) { document.write(stuff+""); // (or alert if you prefer) } }; return my; }(); }
#13 by Ms2ger on February 17, 2010 - 11:05 am
And say that Opera’s got that for ages…
#14 by Fortunat on February 17, 2010 - 1:44 pm
Great trick :D thanks for the tip!
Though simply holding Enter has always worked for me… I wonder why everyone insists on clicking their mouse to death, when you can just hold Enter…
Just a though, of course. Your trick pwns either way ;-)
#15 by David on May 25, 2010 - 2:53 am
If I hit Enter to submit a form or do some action and that sends me into the “infinite” alert loop, then holding Enter will most likely cause me to redo the action after I’ve gone through all the alerts. Then I will have to go through them again…. And what if I’m trying to find out where/why my code is looping infinitely and causing my browser to freeze? At that point, we can assume that if I’ve found it by putting the alert in the right spot, that alert will literally loop infinitely. I need some mechanism to defeat the modality of the alert and stop the code. Generally, closing the browser (browser tab in this case) is the only option.
#16 by Howard Yeend on May 25, 2010 - 12:15 pm
very true. I suggest installing the extension and using console.log for your own debugging.
#17 by Del on March 20, 2010 - 10:19 am
Chrome has it’s own DOM inspector / Profiler etc built it, so you can write to the console in chrome too. Although, Firebug has so many features that i can’t quite let go of yet.
Nice Post H.