The Developer's Browser

Few people realize that, aside from being searching gizmos with themes and cool extensions, Mozilla browsers come with a couple of tools which ease pains of client-side development.

You can find these tools under Tools > Web Development in Mozilla, or Tools in Mozilla Firefox.

JavaScript Console

One of these tools is the JavaScript Console. Not a whole much to it, but it’s way better than a wimpy scripting error alert in Internet Explorer. Not only does it tell you where an error occurred, but often times it provides a link that takes you straight to the offending line.

In contrast, Internet Explorer gives you a cryptic error with a bogus line number. I’ve never been able to use this line number—is it a line in an external JavaScript file, the page markup or the page + external JavaScript combined?

DOM Inspector

This is a much more comprehensive tool. Fire it up, type in a URL (if it doesn’t feed one itself) and click Inspect. On the left hand side you see page structure represented as a tree. You can navigate to any element on the page and inspect its properties.

If you want to save time browsing through somebody else’s HTML galore, click the button next to the binoculars (upper left corner) and click on any visible page element. DOM Inspector will find the corresponding node in the tree and highlight it. You can do the same by selecting Search > Select Element By Click.

Yet one more way to search a node is to press CTRL+F, or go to Search > Find Nodes.

Once you’ve selected a node the list of objects you may inspect from the right pane gets updated. Now, this is the fun part. DOM Inspector gives you comprehensive information about the selected node. This information includes:

• Node name, value, namespace and type according to the DOM parlance (select DOM Node from the pull-down menu).
• All CSS rules applied to the node (select CSS Style Rules).
• Computed CSS rules. This one is truly great. Computed rules are gathered from inheritance (!), inline styles, external style sheets, scripts, etc (see Computed CSS Rules).
• Node representation in the DOM tree. This view shows all node attributes; parent node, child nodes, previous node sibling and so on.

The one I find extremely useful is CSS Style Rules. The view shows all CSS rules applied to the node wherever they appear: inline declarations, external files, etc. If you can’t figure out why something has the wrong width, color, alignment or what have you, inspect the computed rules and see which one takes over.

Venkman JavaScript Debugger

This is a powerful client-side debugger whose functionality merits a whole post of its own. I encourage you to check it out on your own.

Microsoft Script Debugger

There’s a way to debug client-side code in Internet Explorer/Win with Visual Studio.NET which is outlined in KB 816173: How To Debug Client-Side Script in Visual С# .NET. They recommend installing Microsoft Script Debugger, but I don’t. It’s clumsy and only gets in the way. Having VS.NET alone is sufficient.

There´s also a very good web developer tool for Mozilla/Firefox from chrispederick.com. You can see it here:
http://www.chrispederick.com/work/firefox/webdeveloper/

Hey all,

I don't know if this is the right place for this query, but I'll let you decide.

I have an aspx page that calls a remote webservice through javascript. Everything works fine in IE (of course), but it is not so in Firefox. Here is the code I am using in Firefox 'mode' to get to the webservice:

var soapVersion = 0; // Version 1.1
var object = "uri:GenerateImage";
var transportURI = "http://techdev.quickparts.com/wsStlImager/GenerateImage.asmx";

function initFF( )
{
//alert("in init");

//get the file list
var filelist = Form3.FILE_LIST.value;
var method = "GetImages";
var headers = new Array( );
var params = new Array();
var param1 = new SOAPParameter(filelist, "FileListStr");
param1.namespaceURI = object;
params[0] = param1;

try {
if (netscape.security.PrivilegeManager.enablePrivilege)
{
netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
}
} catch (e) {
alert("Images will not be generated due to a security issue: " + e);
goAhead();
}

var call = new SOAPCall( );
call.transportURI = transportURI;
call.actionURI = object+"/"+method;
call.encode(soapVersion, method,object, 0, null,params.length,params);
var currentRequest = call.asyncInvoke(DisplayFireFoxResponse);
}

This code fails and displays the error when trying to modify the privileges for Firefox.

Here's what I have tried so far:

1. Placed all java in a js file and signed. This gave same error.

2. Signed the entire .net dll. This gave the same error.

I am pretty sure the whole aspx page has to be signed somehow, but I cannot find a resource on the web (that's unbelievable) that tells me how to sign javascript in an ASPX page.

I would love to hear what you guys can come up with. Thanks!

Regards,

oconnef

I ran into a similar issue once. I opened up the JavaScript console and it had an exact description of what to do.

Btw, have you seen Signed Scripts in Mozilla? Was it of any help?