Comments on: Debugging JavaScript: Throw Away Your Alerts!

By: xero

xero — Tue, 10 Feb 2009 21:15:48 +0000

Not quite…

Try the following code in IE, FF, Safari, and Opera and see what you get (roll your own print() of course).


try {
  throw new Error(42, 'foobar');
} 
catch(e) {
  print('e is: ' + e)
  print('e.number is: ' + (e.number & 0xFFFF));
  print('e.number is (raw): ' + e.number);
  print('e.description is: ' + e.description);
  print('e.name is: ' + e.name);
  print('e.message is: ' + e.message);
}

Cycle these variations in to see how that goes…


throw 'foo';
throw { name: 'foo', message: 'bar' }
throw new Error(42, 'foobar');
throw new Error('I detect an error!');
throw new SyntaxError('Your syntax is no good');
throw new Error('foo', 'bar');

https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Error
http://www.webreference.com/js/column118/6.html
http://www.javascriptkit.com/javatutors/trycatch2.shtml
http://msdn.microsoft.com/en-us/library/t9zk6eay.aspx

By: hj

hj — Wed, 10 Sep 2008 20:24:04 +0000

Greg said:

Instead of throw() function, I would rather use throw statement: throw { name: 'My API Input Error', message: 'Input must be a number' }; Compare it with more clumsy throw() function: var err = new Error(); err.name = 'My API Input Error'; err.message = 'Input must be a number'; throw(err);

Umm, you do realize that throw is a statement? Like return (which takes an optional argument), throw takes one argument, which is expected to be an object constructed by Error. So your assertion that throw {object} is simpler, is simply wrong -- you're saying that


  return 4;

is simpler than


  var i = 2;
  return(i+i);

You can say, if you'd like:


  throw new Error('My API Input Error','Input must be a number')

By: greg

greg — Thu, 28 Aug 2008 08:02:15 +0000

Instead of throw() function, I would rather use throw statement:

throw {
   name: 'My API Input Error',
   message: 'Input must be a number'
};

Compare it with more clumsy throw() function:

var err = new Error();
err.name = 'My API Input Error';
err.message = 'Input must be a number';
throw(err);

By: nathj07

nathj07 — Thu, 28 Aug 2008 06:54:15 +0000

The blog was useful in serving as a start for great discussion. so from that point of view – thanks; I’ve learnt some stuff here.

As for my 2cents worth well, I use Firebug to debug any pre-release code I have and then once I know it’s working correctly there some cross platform testing sees me right. All this means that the released code is working fine. JS is supposed to be cross-browser.

As for the earlier post from Breton that’s a great idea. We should never throw our error messages to users on the web. They are unliekly to report the problem and will simply get what they are after somewhere else. So if you must handle exceptions (my JS is a ll fairly simple) which is a good idea in more complex systems then a logging tool such as this is a great idea.

By: Red T-Rex

Red T-Rex — Thu, 28 Aug 2008 01:16:41 +0000

The DOJO framework provides a simple cross browser mechanism that creates a console in browsers like IE that do not natively support it. Then you can use something like:

console.debug(”Deleted record: ” + recordId);

By: naterkane

naterkane — Wed, 27 Aug 2008 19:48:58 +0000

here’s the url for that bookmarklet since it looks like sitepoint’s comment system ate it.

javascript:var%20firebug=document.createElement(’script’);firebug.setAttribute(’src’,'http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js’);document.body.appendChild(firebug);(function(){if(window.pi&&window.firebug){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);

By: naterkane

naterkane — Wed, 27 Aug 2008 19:48:13 +0000

As Klas was saying… Firebug Lite is cross browser, he didn’t mention that you don’t need to run it on your server if you use a Bookmarklet to call it up. Save the javascript url below as a bookmarklet, and enjoy firebug anywhere, on any site.

Firebug Lite Bookmarklet

The only downside to this approach, is that you have to manually load firebug and anything that’s running before it’s loaded is not available (console, net transfers, etc…) which doesn’t help you if you have a window load or dom load based app to test.

By: brothercake

brothercake — Wed, 27 Aug 2008 08:36:46 +0000

I never said that throw was useful as a debugging tool. I said it’s useful as a high-level caretaker for other people using something you wrote.

I guess the post’s title is a bit off the mark.

By: Breton

Breton — Wed, 27 Aug 2008 04:49:52 +0000

Apologies for the “inline” code. I didn’t notice the code block button!

By: Breton

Breton — Wed, 27 Aug 2008 01:33:07 +0000

Here's a much better alternative. Continue to use the alert function as normal, but overwrite the alert function with a simple console logger. I find this to be quite useful, as there's no legitimate usage of alerts in applications other than to annoy your users. I find it satisfying to destroy it it outright. When you're done debugging, just replace alert with a stub function that does nothing. (or even silently ajax the alerts to a serverside error logger!) Here's a simple one I threw together JUST NOW. No warrantees, only tested in firefox 3, not garaunteed to work anywhere. But give it a try, you might like it:


alert = (function () {
   var console = document.createElement("div");
   console.setAttribute("id", "console");
   console.setAttribute("style", "width:300px; height:300px; font-family: monospace; font-size: 10px; border: 1px solid black; background: white; position: absolute; right: 0; top: 0; overflow: scroll;");
   document.body.appendChild(console);

   return function (s) {
      var p = document.createElement("p")
      p.appendChild(document.createTextNode(s));
      console.appendChild(p);
      p.scrollIntoView();
   }
})()