Slashdot Mirror
Using Mozilla in Testing and Debugging
Henrik Gemal writes "In this article I will describe some very cool features in Mozilla which will enable you to quickly find and debug errors in your web site and web applications."
← Back to Stories (view on slashdot.org)
This is also a good page to checkout for more info:
0 2/venkma n/01/
http://mozilla.org/projects/venkman/
Venkman is the JS debugger in Mozilla... and it's sweet.
There is also a Netscape made intro that may be helpful to new users:
http://devedge.netscape.com/viewsource/20
- shell (type JS statements to evaluate them)
- onerror status
- onerror alert
- test styles (type CSS rules; it applies them immediately)
- zap style sheets
- view style sheets
- view scripts
- view variables
- generated source
- partial source (not as good as "view selection source" in Mozilla's context menu)
- show blocks
- ancestors (makes status bar show what you're hovering over, in the format "BODY > DIV#content > DIV.blog > DIV.blogbody > P")
- make link (create HTML to link to a page)
- show named anchors
You can do many of these things with the DOM Inspector or JS Debugger, but boomkarklets usually require fewer clicks and are easier to learn. All of these bookmarklets work in Mozilla, and many of them also work in IE or Opera or both. Web developers might also find these validation bookmarklets and keywords bookmarklets for scripters useful.The shareholder is always right.
What a fool believes, he sees, no wise man has the power to reason away.
Using Mozilla in testing and debugging web sites
Mozilla is a great tool to use in developing web sites and web applications. Not as a development tool itself, like an editor, but as a testing and debugging tool. In this article I will describe some very cool features in Mozilla which will enable you to quickly find and debug errors in your web site and web applications.
JavaScript Console
A lot of the errors found in todays web pages and web applications are caused by JavaScript errors. Most of the time they're very simple errors. This is in my opinion the most common reason why sites doesn't work in Mozilla. But these errors could easily be avoided. With Internet Explorer you are, if you have set the correct setting, presented with an almost useless dialog that "page contains errors". The dialog doesn't let you copy the error to the clipboard for starters. If you want better debugging in Internet Explorer you can install the Microsoft Script Debugger which is a debugging environment for scripting in Internet Explorer.
Picture 1: JavaScript error in Internet Explorer
With Mozilla on the other hand you have the JavaScript Console. All JavaScript errors are logged here. So if you keep the JavaScript Console open while testing your site you can on-the-fly see if there are any JavaScript errors. An indispensable tool for developing web sites and web applications.
The JavaScript Console reports the error and the filename and the line number. Furthermore the context of the error is shown. This makes it very easy to get a clue about where the error is and what caused it.
Picture 2: The Mozilla JavaScript Console with errors
You can right-click on each error and copy it to the clipboard. The JavaScript Console could still need a lot of improvements. You can't save all entires to a file and it has problems with wrapping.
The JavaScript Console can be started via Tools -> Web Development -> JavaScript Console.
JavaScript strict warnings
JavaScript strict warnings are messages that are produced inside the JavaScript Engine, which is in the core of the browser. JavaScript strict warnings are produced in all browsers. In both Mozilla and Internet Explorer and Opera. But only Mozilla shows them. JavaScript strict warnings are warnings from the JavaScript Engine about some mistakes in the client side JavaScript code. These mistakes, unlike JavaScript errors, do not stop the execution of the web page. But they do slow it down a bit, since they produce an exception inside the JavaScript Engine.
Picture 3: JavaScript strict warnings
In other browsers than Mozilla these exception are not available to the developer but with Mozilla you can access these warnings. This puts you in the driver seat for making 100% valid JavaScript code!
A common mistake in JavaScript is to declare a variable twice:
var response = true;
var response = false;
This will produce a JavaScript strict warning saying
"redeclaration of var response"
The correct way is of course:
var response = true;
response = false;
The JavaScript Console can be enabled in nightly builds via Edit -> Preferences -> Debug ->. If you run a official release you can use the javascript.options.strict pref which can be set by entering about:config in the Location and hitting enter.
More info...
Tackling JavaScript strict warnings
Cookie Control
Most web sites and web applications nowadays are using cookies. Debugging cookies can be a problem. But not if you use Mozilla. If you're using Internet Explorer the only option you have from within Internet Explorer is to delete all current cookies. If you want to delete all cookies from a specific domain you have to manually delete the Internet Explorer cookie files which are located in the %USERPROFILE%\Cookies directory. Since the files are in a unknown text format I'm not sure it you can delete or edit specific cookies from a site or domain.
Picture 4: Cookie Manager in Internet Explorer
With Mozilla it's all
I know this isn't exactly what you're asking for, but Checky is a Mozilla Plug-in that will validate the current page when you press F10. It won't help evangelism, but at least it makes it easier for web developers to generate valid HTML.
What a fool believes, he sees, no wise man has the power to reason away.
One of the reasons I switched from Netscape Navigator 3 to IE 3 was that when I viewed the source of a website on my local hard drive (ie: testing and debugging), IE would open the actual file in Notepad (or any other editor), while Navigator would open either a non-editable page source window or a cached version of it in Notepad (no, I'm not going to use Composer).
The same is kinda true with IE6 and Moz today. IE6 lets me move around my local prototype website and click on a large Edit button. This simplifies editing static html pages for me.
But hey, I still think Mozilla is great and invaluable for testing and debugging code. The Javascript Console mentioned in the article has saved me tons of time. I totally recommend it as the first thing to use to check for scripting errors.
One final though... IIRC, IE5.0 has had a View Partial Source tool available as part of a powertoy (er, Web Development Accessories) for web developers.
I still use HTMLtidy to check my pages... I would love to have something like a "stringent" mode while developing web pages (ala browser producer error instead of trying to render the html). A while ago I found out that mozilla can even be more forgiving than IE. There was some weird bug in a parser I was testing, which sometimes resulted in </tr> to be rewritten as </tr or something. Mozilla didn't care. IE was totally confused. (First time I ever found something in html that confused explorer, but rendered ok in moz). Anyways... is such a mode/plugin available?
Try going to the URL about:config and changing the preference network.http.request.timeout to a large value.
What a fool believes, he sees, no wise man has the power to reason away.
"view-source in a tab, rather than open a new window"
I'm pretty sure that MultiZilla will let you do that.
A validator would be a better choice. It's a proper syntax checker, not just a linter.
FYI, in Mozilla, they have a different effect:
CTRL-1 launches a new browser
CTRL-2 launches a new mail app
CTRL-3 launches a new chatzilla
You've gotta use CTRL-PageDown and CTRL-PageUp
Joe
http://www.joegrossberg.com
I know just the Mozilla plugin for you:
Checky
A single keypress (F10) will then open the validators of your choice (e.g. the W3C HTML & CSS validators, Bobby, HTMLTidy, URL checker, etc.) in seperate tabs, or windows if you prefer.
Fantastic!