Javascript’s alert() function is not really built for the 2012 web. It’s a relic from a simpler time, before things like console.log() and jQuery UI and Justin Bieber existed.

Nevertheless, browsers will likely always have to support it. There are enough pages out there invoking alert() that it can’t simply be suppressed entirely — especially since the point of an alert is to convey particularly important information.

Fortunately, the way browsers handle alerts has gotten better over time. It used to be that you could melt down a page by firing alerts in a loop. Nowadays, in browsers like Firefox and Chrome, you’ll see a checkbox inside the dialog box that lets you prevent a page from firing multiple alerts:

That solves one of the major problems with alert(), but let’s assume you don’t want to suppress any alert — you just want the alerts to not be so annoying, e.g. by halting the execution of whatever script is running until you press “OK.”

One way to completely tame an alert() is to take over the function.

When you call an alert() what you’re really calling is the ‘window.alert’ function.

Let’s write our own (better) alert function and assign ‘window.alert’ to that.

Converting alert() to console.log()

If you typically have a debug console open as you browse the web, one simple way to take over alert() is to convert it to console.log:

This will send all of the alert messages to the console. The nice thing about this is that it outputs the message but doesn’t require the user to press “OK” to continue. In most instances, that’s desirable, but remember that if an alert() ends up in an infinite loop, you’re still going to have problems, so you may want to institute a limit to the number of times this function executes:

By setting ‘window.alert’ to null after 30 alerts, we’ll trigger an error and be done with it.

Displaying the alert() on the page

Even if you do tend to keep a debug console open, an alert() diverted to the console can easily get lost amid the other stuff that ends up there.

Thus, you may prefer to display your alerts on the page, rather than in the console.

As with the console.log() implementation, we can do this in a non-blocking way, so that you don’t have to click “OK” each time a new alert message pops up.

I’ve created a Greasemonkey script that displays the following dialog box in the top left of the page when an alert is fired:

Clicking on the title text toggles the dialog box to show and hide the alert message:

If multiple alerts are fired, they simply get added to the list:

It’s only when you click the “close” button that the alerts list is wiped out, allowing you to retain a history of alert messages. (If another alert fires after you close the dialog box, a new dialog box displays, but in the interest of clarity, it omits the previous alerts.)

Install the Greasemonkey script

If you’d like to check out the code but don’t want to install the script, here’s a jsFiddle that demonstrates the functionality.

Additional info

While co-opting native Javascript functions is something that you, as a web surfer, can do by way of a user script, or even as a first-party developer (i.e. on your own website), it’s not something that Monetate would do, since the third-party scripts we provide to our clients’ sites must not interfere with functions they or other third-party providers might need to use. We take great pains to never introduce code that could cause such conflicts.

I should also point out that the Greasemonkey script and the jsFiddle demo both place the dialog box in a fixed position on the screen, without the ability to drag it elsewhere. If the ability to drag it is important to you, it’s fairly straightforward to add that functionality by making use of jQuery UI.