Hi, this blog is no longer maintained, my new blog is here

Ruby On Rails and a Conning Israeli entrepreneur

Debugging Javascript in Web Applications: Major browser roundup

Most web applications that i know, are based on interpreted script languages (PHP, Ruby, Python) and some are compiled (.Net, Java). The complied languages often (if not always) come with a full environment, IDE and a debugger for the server side code, the interpreted languages aren't and the developer is more than ofter required to load the application and page in order to check for syntax error and use debug prints as the most basic tool of debugging.
Javascript is an exception, it's a de-facto web development script language, but it's rendering engine and debugging options vary from browser to browser.
I gathered up a list of common web debugging tools for Javascript. i will be happy to get some more ideas from everyone.
here we go:

The ultimate solution - Firebug addon
ok, i know what you might say: "it's a FIREFOX addon!, how can it be THE ultimate solution?".
Well, good news.
Along side the plain firefox addon, there's also a lite version that runs as a seperate javascript on Safari, Opera and yes, IE.
The Lite version is not as comprehensive as the addon, but it's more than a blessing when dealing with IE javascript bugs ("line:33, char:33 crap").


JSLINT.COM - Javascript verifier
Just paste your JS code and let this cute little tool and watch the Javascript errors flow back at you. important to add that it does not recognize frameworks conventions (the jQuery $ selector is considered as a Global definition, use JQuery instead) and will not identify browser specific issues, it's marely a javascript syntax checker.

BlackBird.js - Cross browser javascript logger
Blackbird offers a dead-simple way to log messages in JavaScript and an attractive console to view and filter them.

Internet Explorer - Evil, annoying, can't we just drop it?

DebugBar - Firebug's little brother
debugbar is a nice Firebug mockup for IE, simple but not as strong as Firebug. problems are that it's not free, and you'll have to install a whole lot of crap on your computer. too bad.
you can also checkout the Compainion.js free version of a javascript console for IE.

IE Developer Toolbar - HTML, CSS, no Javascript
Let's face it, the IE's so-called javascript engine just sucks, any attempt they'll do to fix it must start by simply re-fuckin-write it.
The IE Developer Toolbar is a poor attempt to find a solution for some of the problems facing a web developer when dealing with IE, but at least it's something.

Safari - When i am not working, that's the one.
*by saying Safari, i mean the MacOS one, not that fucked up Windows version, yak.

Safari came from Apple, so it's probably padded with thought, intention and considiration to any kind of end-user, as well as a developer.
The Safari developer tools are nice, from a very descriptive, good looking Console and Network stats, to a rendering engine that can mimic other browsers (although i am not sure how good it is.).
This "How to Debug Javascript in Safari" article contains all you'll need to know.

FireFox - by the developers, for the developers

I have to say it, but if you made it this far and you still havn't figured out how to debug Javascript in Firefox, you have a problem.
Debugging Javascript is all about the Addons engine. This huge gallery contains a lot of web development related addons and tools, just go there and pick what you want.
Two addons you'll have to pay attention to are the Web Developer toolbar addon, and Firebug we've mentioned before.


The Web Ask eizesus.com


    follow me on Twitter

    Twiters Around

    About Me

    My photo
    I am a web developer for more than 9 years, managed, cried, coded, designed and made money in this industry. now trying to do it again.