Debugbar, CompanionJS - Webdev tools on IE

FireBug is an excellent tool on FireFox for anything to do with Javascript et al. If you have no idea about the FireBug, posts this and this would give a good idea about FireBug.

Unfortunately, i couldn't find any such equivalent tool/plugin for IE client-side dev/debugging. There is a version of FireBug for IE, with just a Javascript shell and inability to profile/debug a live site.

To my luck, Google blessed me with this IE plugin called DebugBar. Its a pretty good developer tool for client side debugging on IE, with its own PROs and CONs.

Some of the features of DebugBar:

DOM Inspector: View DOM tree, modify tags, css, attributes of the page on the fly

HTTP Inspector: View HTTP and HTTPS request/response

JS Inspector and Console: Explore JS scripts and functions. Javascript shell to executre scripts on the fly. This looks pretty decent than FireBug.

HTML Validator: Describes the errors in the rendered page. Quite detailed and wide variety of errors are caught during validation.

Pickles: Other peripheral tools like color picker, page screenshot etc

Download the plugin from here and install it. These guys claim to have received the best IE plugin award from Microsoft and also, showoff their spyware free certification.

Two UI components appear in the plugin. A toolbar and a sidebar. Below are the snapshots.

Sidebar

Toolbar

I am not going to explain every feature of the tool, as the website has sufficient documentation and above all, hands-on is the way to explore the tool.

So, i am just going to compare this tool with the FireBug in terms of functionality and usage.

Parameter	FireBug	DebugBar	Remarks
DOM Explorer	Present	Present	Equally powerful.
Drag Target	Absent	Present	DebugBar has a catchy “Drag Target” icon that can display the element under the icon’s scanner. Drag Target can be achieved in FF through Web Developer toolbar.
HTTP Monitor	Present	Present	Equivalent
Javascript explorer	Present	Present	DebugBar functions explorer is more user friendly and detailed.
Javascript shell	Present	Present	Equally powerful.
Live Debug javascript	Present	Absent	No live debugging, No breakpoints and No watch in DebugBar.
Live Profile javascript	Present	Absent	No live profiling, No Performance stats on execution time and function calls invocations in DebugBar.
DOM Validator	Absent	Present	Scans for common coding errors in DOM automatically.
HTTPS requests	Absent	Present	Very useful feature of DebuBar not available in FireBug.
Live Edit page(HTML, CSS)	Present	Present	Similar

Overall, FireBug scores mainly in the profiler and debugger functionality over DebugBar. Otherwise, the tools are equally good in features and usage. In any case, there are similar tools in FireFox. But, IE lacks in this area. That being the case, i would consider DebugBar a worthy tool for web developers.

The main drawback is the missing debugger functionality in DebugBar. I found another IE plugin from the same guys to do embedded live JS debugging. Its called CompanionJs live debugger. The curious minds can check it out here.

In any case,FireBug seems to be the bigdaddy of all debuggers and, CompanionJS is more similar in UI and functionality, but there can be only one BOSS 8)

Browser specific CSS

Found an interesting thread on CSS hacks here
I have tried to summarize few interesting things from the really long thread.

The difference in CSS rendering is a common problem between IE and FireFox. We need to write browser specific CSS to solve the problem. There are two ways to implement browser specific CSS code rendering.

By using conditional tags for different browsers

This approach is promoted more by MS for CSS behaviour changes in IE7. The idea is to create seperate versions of CSS code for specific browsers and use the conditional tags to include/exclude them in rendering our page. Following are few conditional tags.

<!--[if IE]-->

IE specific CSS goes here

<!--[endif]-->

<!--[if lt IE 7]>

Code valid upto version 6 of IE

<!--[endif]-->

By using CSS code that's ignored by certain browsers and accepted by others

The idea is to use keywords that are ignored by certain browsers, thereby only the intended browser will evaluate the rule.

After each rule, add a second rule. The selector of the second rule must use a child selector. In this new rule, correct any IE-specific declarations previously made. First is IE, 2nd is Firefox as IE doesn't understand the second rule containing "body >", "html > body".

Example A:

div#header {margin-top:-3px;}

body > div#header {margin-top:0;}

Example B: 

.promo h3 {height:21px;}

.promo > h3 {height:auto; min-height:21px;}

Example C:

ol {padding:0 0 0 5px;}

html > body ol {padding:0;}

Dev Tools for Ajax - FireBug Javascript profiler/debugger

The previous article mentions a bunch of interesting dev tools for Ajax web apps. FireBug is one among those and specific to FireFox browser.

The FireBug is available as a FireFox extension. FireBug is a profiler cum debugger for Javascript, DOM and CSS.

What can we do with FireBug?

- Debug javascript code

- Monitor network activity

- Explore the DOM

- Live edit HTML pages

- Logging javascript calls

- Profile javascript

- Execute javascript on the fly

- Tweak CSS

Debug javascript

Find the loaded js files, Keep breakpoints, Keep conditional breakpoints, Explore the call stack, Watch the variables, Variable tool tips, Log function calls

Monitor Network activity

Watch the time taken to load a file, Find out if a file was from browser cache, Check the contents of HTTP requests/response

useful tips:

JavaScript files load one at time, never in parallel. This will help you tune the order of files in page so that the user spends less time waiting for things to show up.

Requests served from cache are color coded with light gray.

Explore the DOM

View the functions, properties, constants. Color coded variable names. Object representations. Live edit of variable values. Autocomplete editing. Navigation to javascript code.

useful tips:

Top panel shows the DOM hierarchy during navigation.

Options drop-down provides filtering choices.

Live edit HTML pages

Find elements on mouse over, Quick search HTML source, Live edit HTML elements

userful tips:

Inspect button toggles the mouse over functionality

Logging javascript calls

Console.log function, Categorize the log entry[info, dbg, warn] in color codes, Measure the time, Profile the calls, Print stack trace

usefule tips:

console.log, console.warn, console.time, console.timeEnd, console.profile, console.profileEnd, console.trace are few functions

Profile javascript

Profile a scenario without writing any special code, Get to know the list of functions called and the time taken by each one of them.

useful tips:

Go to Console tab and get to see the Profile button in the top panel. Click the Profile button once to start profiling. Click it again to end profiling

Execute javascript on the fly

Its a Javasript Shell!! Write a one liner or a whole bunch of js functions.

usefule tips:

use $1 to refer to the last variable used in the shell. press SHIFT+ENTER to search for the variable in all the tabs.

References:

www.getfirebug.com

Dev Tools for AJAX web apps - Intro

There are few interesting tools to help in the development, debugging and testing of AJAX based web apps. When we talk about AJAX, we are obviously talking about client-side programming with focus on Javascript, DOM and CSS.

The discussed tools are specific to either Internet Explorer or Firefox and hence the categorization based on those.

IE Tools:

Drip/Sieve - Memory leak detector for DOM and Javascript

Fiddler - Http sniffer for IE

Visual Studio.NET - Javascript Debugger

FF Tools:

Live HTTP Headers - Http sniffer plugin for FF

Web Developer toolbar - DOM/Page explorer

FireBug - Javascript debugger

Venkman - Javascript profiler cum debugger

IE Tab - Embeds IE as a tab within FF

Among the list, FireBug and Venkman are of interest to me.

Watch the space for hands-on.