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)
It lets me glace at things pretty quickly to get an idea of what may be wrong, and saves me the step of loading it into a full blown editor. Plus, I can select only part of a document and just view that particular source.
I also like the http header viewer add-on mentioned in the article. I used to have to visit a website and use that to view headers.
Google doesn't index user sigs, so stop trying to "Google Bomb" with them.
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.
I'd also love to have keyboard navigation between tabs
Ctrl-1,2,3, etc will switch between open tabs, at least in Phoenix.
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.
This was discussed, and even worked on for a while, but was eventually rejected. I go agree that it would be nice to have, however.
0 8
http://bugzilla.mozilla.org/show_bug.cgi?id=471
Life has many choices. Eternity has two. What's yours?
"view-source in a tab, rather than open a new window"
I'm pretty sure that MultiZilla will let you do that.
I'd really like a "tandem" mode, where the browser would automatically open each page in both normal and accessibility, or normal and text-only, modes (in two parallel windows, naturally).
In testing my own website for IE6, Mozilla-1.3, and Opera 7, I seem always to find the same thing:
## W.Finlay McWalter ## http://www.mcwalter.org ##
Wow, it said you could go to Tools -> Web Development -> Live HTTP Headers to see the HTTP Headers, but there is no such item in my Mozilla 1.3 Tools menu.
Hmmm, looks like they haven't implemented it for Macintosh versions.
The other nice thing to have would be an item in the DOM inspector that would show you the XPath for the selected node.
A validator would be a better choice. It's a proper syntax checker, not just a linter.
There's HEAPS of useful bookmarklets linked off that page too. The javascript shell is amazing.
It's an add-on, and the link to get it was posted earlier.
how is babby formed?
I design and write a couple of apps that are heavy on end user input, and i do ALL validation server side. Its faster, less code to send client side, I have a guarenteed enviroment to validate in, AND I CAN TRUST MY VALIDATION 100%. Anything that dynamically alters client side information/input is asking for trouble.
I didnt say the article wasnt any use to me, i found it informative. It still came across as flag waving tho, and i deplore that sort of thing.
Two Things I like about debugging apps in Mozilla:
1) JavaScript debugger. It's WAY better than IE and far more specific. IE will give you a cryptic error message telling what line of code generated the error, but in what file? (js, html or jsp?) Mozilla's JavaScript debugger will tell you the filename, method name AND line number.
2) JSP debugging. If my JSP page is broken in IE, IE will simply give me a page not found error. Mozilla will point out the line number and the part of the line that's causing an error, as javac would when I'm compiling a Java file.
This space left intentionally blank.
Opera is the standards fascist
Opera 7 is definitely better than 6 in this regard, but there are still a few things it just doesn't do right. For example, alternate text when an image loads should follow css rules. Instead, in Opera, it's just black text... which doesn't work if you're using a black background.
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
Mozilla has a "quirks" mode that is trying to be as forgiving as possible.
But as soon as you properly define the DOCTYPE, Mozilla only renders correct HTML.
There is a simple solution, and it is to use JS favelets that connect to the W3 server with the URL details. Basically, you need a link to a JS link, such as this: javascript:window.open('http://validator.w3.org/ch eck?uri='+location);void%200 (and I'm just copying and pasteing from my website). You can put this in the navigation bar, and off you go :-)
There are plenty of bookmarklets which are quite useful. Some of them:
I am sure there are many more cool uses around
--
Free as in freedom
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!
That change wasn't "gratuitous". It was made to reduce the chance of accidentally clicking "close other tabs" while trying to click "close tab" (in bug 191826), without removing the "close other tabs" command completely (which was the initial fix, I think in bug 103354). If jag decides the change didn't help enough, he'll try something else.
This type of change temporarily sucks for people who download every version of Mozilla, but it's better in the long run and it's better for people who only use major versions (such as Netscape).
The shareholder is always right.
I have my local Apache configured to send .html files as application/xhtml+xml so that I know my XHTML files are well formed since Mozilla/Phoenix throw errors if they are not.
Phillip
normal development take place behind a firewall
using dynamic server-side scripting,
so every time your change the state of a page you
would have to save it and upload it to the validator.
I had that exact problem until I installed the WDG HTML Validator on my development server (if you're using Debian, just do "apt-get install wdg-html-reference").
When I have something in development, I add a bit to my global footer saying something along the lines of:It's extremely handy to have around.
I like my women like my coffee... pale and bitter.