What coding conventions that help jQuery and Firebug work together?

Question

I'm fairly new to both tools and need to go hardcore with both as I manage, monitor, and tweak a new site's design process. What sort of strategies should I ask be implemented that sets a good solid foundation for debugging, testing, and logging?

[to the degree that back-end stuff can play a role - it's .net mvc thx

Answer 1

I would just give a small warning using FireBug's network monitor and AJAX together. When enabled, it rewrites some HTTP headers and breaks stuff badly (well it used too, not sure anymore).

So if anything goes ape. Check that network monitoring is disabled.

Answer 2

I would use Firebug to see how things are working with a few Firebug Add-ons.

I would use YSlow to check that you aren't downloading too much and it will make suggestions if you aren't minifying and gzipping your javascript.

I would also use FireQuery as that highlights jQuery very nicely in Firebug. I use it quite a lot these days to see what it should be firing.

Firebug doesn't rewrite XHRequests anymore but there is a bug in the latest Firefox/Firebug where if can block long running XHR calls. Details here

Answer 3

I also suggest you install FireUnit addon. It helps you work with QUnit unit tests. Of course that is if you are planning to write unit tests but in most cases that's the very good idea.

Answer 4

I will also add for tools FireCookie, as it goes very well with $.cookie.

When I am debugging jQuery code I am using the NET panel a lot in Firebug for all ajax requests. Very helpful to see what are you sending and what are you receiving.

Also I use a lot the comand line, to test snippets of code.

You cannot do without the console. It will be very helpful. Example:

$.get( 'url.php', {}, 
    function(data){
        $.each(data, function(x){
            console.log( x ); // will log each x object to see what it contains
        });
    }, 'json'
);

Answer 5

As much as you might love Firebug, Safari's developer tools are also quite powerful, and worth checking out. It's all I use when I dev.

Worth mentioning that Safari's javascript engine is still faster than FFX's, while Chrome reigns supreme. They're playing catch-up though, so this really isn't worth caring about.

Answer 6

First off make sure you've read Firebug's docs. Some of the commands work cross-brower with other tools as well.

A simple search query will show you all available extensions for Firebug. As some people mentioned - some of them are really helpful.

Also it's important not to limit yourself to just a single tool since you will most likely be developing for multiple browsers. So make sure you take a look at webkits developer tools (Safari, Chrome) as well. Here's a good article which sums up the most popular development/debug tools.

You might want to research how jQuery/jQuery plugins are structured/organized so you have general idea how to organise your own JavaScript/jQuery code. It all depends how JavaScript heavy is your application. If jQuery just provides some visual enhancements and few Ajaxified pages here and there, don't bother. From other hand if it's very JavaScript heavy (as in a lot more site logic on client-side then on backend) I would suggest Prototype over jQuery, but it's just my opinion.

You could consider using automatic tools to build your JavaScript if you have a lot of code. For example:

• Sprockets
• Juicer

On production server you want to end up with as few JavaScript files as possible and make sure to compress em.

If you're interested in more links to articles/tools for javascript heavy applications, drop a comment. I'm just trying to stay on topic at the moment.