Advanced Debugging With JavaScript

by Chris Mills, Hallvord R.M. Steen

22 Reader Comments

Back to the Article
  1. Even after IE8 is available, there will still be a need to debug JavaScript in older browsers. Microsoft offers the free Visual Web Developer Express Edition, which has a very good debugger (once you figure out how to set it up). The following blog has instructions: http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/

    Copy & paste the code below to embed this comment.
  2. Let me second how much great the Visual Web Developer Express Edition is. Especially when you when compare it to the JavaScript debugging in the Microsoft Script Debugger. Only probably I have with it is too much debugging causes it to take up a lot of memory, which hurts when working in a VM. But restarting the web developer frees everything up and you can restart.

    That being said, I have found recent version of Firebug to be going down hill. To save on HTTP requests I have something that combines all my scripts into a large single file which regularly results in Firebug complaining about scripts taking too long to execute as it tries to step from one line of code to the next while debugging. And lately I have seen it just ignore changing the arrow when it steps through so one doesn’t know where you are at that point. Additionally, doing too much work with Firebug eventually causes page refreshes to prevent JavaScript from running at all and at best the tab to be duplicated to continue working, or at worst Firefox needs to be restarted completely.

    Copy & paste the code below to embed this comment.
  3. I have to say that FireBug used to be great, but lately I’ve noticed that a clear error will not show up in the debugger once in a while. I use JQuery, and FF3.

    Copy & paste the code below to embed this comment.
  4. a) If you also want to use Firebug in other browsers, give “Firebug Lite”:http://getfirebug.com/lite.html a try. It doesn’t inherit the nice pull-up window like the full-blown FF extension, but it’s still useful to avoid having to switch all the time between different debugging systems.

    b) There’s yet another nice solution for IE called “DebugBar”:http://www.debugbar.com/?langage=en . It features all the niceties Firebug has built in, including Firebug extensions ;)

    BTW: At the same site there’s also available an Internet Explorer 6 – 8 emulator add-on – very useful if you dont want to through the complicated setup of several IE versions and/or virtual machines.

    cu, w0lf.

    Copy & paste the code below to embed this comment.
  5. you guys missed out on some great tools like screw-unit to support writing specs (design your code) before executing:
    http://github.com/nathansobo/screw-unit/tree/master

    Of course you could write the specs after the fact…

    Copy & paste the code below to embed this comment.
  6. The debugger in Safari’s nightly builds has been given an overhaul some time ago.
    “Webkit site”:http://webkit.org/

    Copy & paste the code below to embed this comment.
  7. Thanks a lot for the discussion so far folks!

    1. I agree about needing debugging after IE 8, especially for older IE scripting engines…but it is heavy on the VM! Not sure what to suggest really. The IE 6-8 emulator someone mentioned above sounds very interesting and worth a try.

    2. Firebug – I know they are doing a lot of improvement work on it right now…possibly because of all the work we are doing on Opera Dragonfly…lol ;-)

    3. Screw-unit – thanks for the tip

    4. Webkit debugger – it’s good to see this being improved upon as well.

    Copy & paste the code below to embed this comment.
  8. It’s nice to see a hard-core technical article like this. It seems ALA is moving its content more towards web designers than developers over the last few years, but it’s articles like this keep me here.

    Copy & paste the code below to embed this comment.
  9. I agree; its actually refreshing to see an article here that isn’t a polemic or a “my job is SO important, but my job title is wrong; woe is me” article.

    Its also worth noting how far JS has come since 2000; back then it was pure HELL to code in JS, now we have sensible debugging, and worthwhile frameworks.

    If only its default response to an error wasn’t to lock up silently…

    Copy & paste the code below to embed this comment.
  10. The example code doesn’t seem in sync with the article. I particular in the “Bug two” section the init() function does not include the line “lang = getLanguage();”. This is significant as this is the part of the tutorial where we’re supposed to “step into” the getLanguage() function.

    Copy & paste the code below to embed this comment.
  11. The tutorial on using Debuggers is very helpful.  I’ve used FireBug’s DOM inspection for a while without a clue as to what half it’s controls do, and they will baffle me no longer. But the other big thing I’m taking away from this article is a much better understanding of what’s possible with JavaScript beyond the Jquery UI tricks that interested me in the first place. I also have a greater appreciation for what it will take to master the language…

    Copy & paste the code below to embed this comment.
  12. Don’t forget about the web developer toolbar for Firefox. While it’s not much of a debugger, it does give instant feedback for JavaScript (and CSS) errors, which is a great first step toward debugging.

    For example, I’ve got a glaring red exclamation point at the top of my screen right now about a dropped CSS declaration on this very page.

    Copy & paste the code below to embed this comment.
  13. Dave Lancea wrote:

    the init() function does not include the line “lang = getLanguage();”?


    Oops, thanks for catching that, Dave! It seems to have fallen out during some last minute editing. I’ve asked them to fix it.

    Everyone else: thanks for the positive and useful comments. Great tips about good tools on every browser platform! :-)

    Copy & paste the code below to embed this comment.
  14. It comes with development tools too, and its JavaScript console is quite useful. My point is slightly off-topic, but Chrome is important when it comes to JavaScript performance. Does it get packed into Webkit when you mention ‘major’ browsers? Because Chrome has “more market share”:http://www.w3schools.com/browsers/browsers_stats.asp than IE8, Safari, and Opera.

    Copy & paste the code below to embed this comment.
  15. That is some great info about debugging. I never thought to use java to debug design and code. Thanks for the great advice.

    Copy & paste the code below to embed this comment.
  16. Thanks for sharing this tools on your blog. And the application you’ve post one by one so that every can understand.

    kimberly ventura

    Copy & paste the code below to embed this comment.
  17. Really great article but I can’t seem to follow the steps using firebug—I’ve tried with versions 1.3.0 and 1.3.2. In both versions, the Script panel does not show the script, so I can’t set the necessary breakpoints. Just curious as to what version was used when the article was put together?  Issues aside, I really appreciate the level of detail and thought in the article.

    Copy & paste the code below to embed this comment.
  18. Thanks for sharing this valuable piece of information. I have never tried using Java to debug design and layout. High time I gave it a try.

    Thanks again!

    Copy & paste the code below to embed this comment.
  19. I can’t seem to follow the steps using Firebug

    I’ve just retested (currently on Firebug 1.3.0) and it seems to work fine here! No idea why it fails for you. Perhaps you could post a screenshot somewhere? Is there any way to get to see errors from Firebug itself?

    Debugging a debugger is pretty hard. I know, I’m doing some of that on Opera Dragonfly :)

    Copy & paste the code below to embed this comment.
  20. Hmm, I was also having some problems with Firebug recently, until I noticed that it hadn’t alerted me about an upgrade. Maybe that could be your problem? After the upgrade, it seems like it’s been catching every error.

    Well, regardless, I hope you get it figured out, I think FireBug is one of the most useful FF add-ons!

    - Tyra, “PF”:http://www.profitablenuggets.com/ Consultant

    Copy & paste the code below to embed this comment.
  21. My experience with Firebug has been extremely consistent. I agree with Tyra you may need to upgrade. I be that will solve your problem. “Colon Cancer Early Symptoms”:http://medcntr.net

    Copy & paste the code below to embed this comment.
  22. I have been studying C# .Net for a while now and never really got my head around the logic for debugging apps. I have read this article and a lot of thing shave become clear.

    Thanks

    “Free Wii”:http://www.goodies4free.net | “Free PS3”:http://www.newgadgets4you.com | “PS3 News”:http://blog.freeplaystationthree.com

    Copy & paste the code below to embed this comment.