Using Mozilla in Testing and Debugging 231
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."
Beware of all enterprises that require new clothes, and not rather a new wearer of clothes. -- Henry David Thoreau
I'm a big fan of the html highlighting (Score:4, Informative)
I also like the http header viewer [mozdev.org] add-on mentioned in the article. I used to have to visit a website and use that to view headers.
Feature requests (Score:5, Interesting)
Re:Feature requests (Score:4, Informative)
Ctrl-1,2,3, etc will switch between open tabs, at least in Phoenix.
Re:Feature requests (Score:5, Informative)
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
Re:Feature requests (Score:2)
Opera anyone? (Score:2)
Re:Feature requests OT (Score:3, Informative)
Re:Feature requests OT (Score:2)
fark (Score:2)
Re:Feature requests OT (Score:2)
In additional to the parent, CTRL + Page Up can be used to go forwards, and CTRL + Page Down backwards.
Re:Feature requests (Score:2)
There some (rare) instances in which it fails, that depends on the contents of the page. I haven't researched it enough to fill a bug report yet.
Re:Feature requests (Score:5, Informative)
"view-source in a tab, rather than open a new window"
I'm pretty sure that MultiZilla [mozdev.org] will let you do that.
Anyone else get this? (Score:2)
But often when I press those, or Ctrl-T to open a new tab, it often does the action more than once. Sometimes up to five times!
Like, I'll press Ctrl-T and up to five new tabs will open. Or, if I have 4 tabs open, and I press Ctrl-PgUp, it will cycle through ALL of them and go back to where I started!
It seems quite random. Sometimes it will correctly only do it once. Sometimes twice.
It has happened at least since Moz 1.2, and maybe earl
Re:Anyone else get this? (Score:2)
Keyboard Navigation Between Tabs (Score:2)
Ctrl+PgUP / Ctrl+PgDown
Don't feel bad, someone pointed it out to me also.
Re:Feature requests (Score:2)
Re:Feature requests (Score:2)
Try Ctrl-PageUp and Ctrl-PageDown.
Has been working for ages...we're talking pre-1.0 here (I guess since 0.9.something).
Apparently there should be better documentation for Mozilla, as it took me ages to find this out as well (thanks to the guy who posted it on slashdot sometime, that's when I discovered it..so now I'm keeping up the tradition
AFAIK there is n
Re:Feature requests (Score:2)
Re:Feature requests (Score:2)
Venkman is good (Score:5, Informative)
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
I must be using Debian for too long... (Score:2, Funny)
Re:I must be using Debian for too long... (Score:2)
Pah! Real men type apt-get install mozilla-snapshot, not mozilla
ok, so.... (Score:2, Interesting)
paradime change (Score:4, Insightful)
Re:paradime change (Score:3, Interesting)
Re:paradime change (Score:2, Insightful)
Also gave them (Score:2)
Re:paradime change (Score:4, Insightful)
In short, websites are often not collections of html documents comparable to a PDF file, but true pieces of software that require thought and analysis throughout the development cycle. To get an idea of this, download a copy of phpMyAdmin [sourceforge.net] or webmin [webmin.com] and have a look at the source. Slashcode is also a good example.
Testing with mozilla (Score:5, Insightful)
Re:Testing with mozilla (Score:2, Insightful)
Re:Testing with mozilla (Score:2, Interesting)
Re:Testing with mozilla (Score:4, Insightful)
Convince them they don't need the JS, much less rely on it for pages to display or navigate properly and life will be much better.
Re:Testing with mozilla (Score:5, Informative)
Re:Testing with mozilla (Score:5, Informative)
A validator [w3.org] would be a better choice. It's a proper syntax checker, not just a linter.
Re:Testing with mozilla (Score:2)
Comment removed (Score:5, Insightful)
Sounds like the quirks mode (Score:3, Informative)
But as soon as you properly define the DOCTYPE, Mozilla only renders correct HTML.
Re:Testing with mozilla (Score:5, Informative)
Checky [mozdev.org]
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!
Re:Testing with mozilla (Score:5, Funny)
That would be "Mr. Bastardized HTML" to you, thank you very much.
IE now sets the standard for bastardization and no weasel browser doing new bastardization of HTML should get the uppity idea that it can do the same.
Impressive features list (Score:3, Interesting)
The DOM Inspector will be really nice for checking out the rendered structure of a page. I've always had a tough time with this since I generate most of my pages dynamically. In fact most of those tools will be *incredibly* useful in that context.
I have to say I'm really impressed with the progress the Mozilla team is making. For a while there IE was leading the way, now that trend has clearly reversed.
An internet story (Score:4, Funny)
2) upload article to own website
3) submit link to own article on Slashdot
4) discover the bug the hard way when own website is slashdotted to smitherines within 20 seconds
5) ????
6) Famous!
standards compliant so far (Score:4, Insightful)
Let's hope that with these new developer features they continue with this compliancy, and don't go and do what MS did to scripting/programming languages when they released
Re:standards compliant so far (Score:2)
Re:standards compliant so far (Score:2)
And while my comment above may have cast me in a completely anti-MS light, I do commend them for getting their act together in the CSS area long before Netscape was able to.
Big Advantage (Score:4, Interesting)
With Mozilla being so attractive to web developers it makes it so much more likely that sites will fully support mozilla and those developers will bring in more users.
Getting developers to use your application is a great way to build market share.
Our own developers tend to use Mozilla as the key browser already, with tests to check behaviour on IE later.
All we need now is full etester type functionality using Mozilla instead of IE (preferably Linux based). We have used many add-ons for JUnit (like Canoo Webtest), but the javascript and DOM support is always the problem. Embedding mozilla might be a better way to go.
Dave
Mozilla is great for debugging Javascript... (Score:5, Interesting)
I wish this article had addressed the whole MSIE "document.body" mess, though. The correct DOM equivalent is "document.documentelement", but it doesn't work in MSIE6 unless the document is properly defined with a DOCTYPE declaration (otherwise MSIE is in backward-compatibility/buggy mode).
Otherwise, a really great introduction. I've been using Mozilla to do javascript for months and didn't know most of the data here.
Re:Mozilla is great for debugging Javascript... (Score:2)
Validity checker and indicator (Score:5, Insightful)
It would be an even better tool for standards evangelism if it was included in the default installation of Mozilla/Phoenix. Then you'd turn the entire population of Mozilla users into nitpickers, who would hound site developers about lack of standards compliance.
From personal experience, nothing makes you fix problems faster than users regularly sending you e-mail about things that are broken. So making it obvious when things are broken would lead to more feedback, and more feedback would lead to more standards-compliant websites.
Which would be good for Mozilla, and all other browser developers who work towards standards-compliance.
Re:Validity checker and indicator (Score:2, Insightful)
This makes complete sense to me based on personal experience. I work for a web shop and some users complain who see javascript errors in the status bar at the bottom of IE. It usually isn't affecting them, but users don't like to see errors!
If the major browser makers would include this feature (even when they still have code to work around non-standard stuff) html compliance would soar.
Even aside from that, having compliance validation right in the br
Re:Validity checker and indicator (Score:5, Informative)
Also, CSS debugging help (Score:5, Interesting)
I'd love to see something that helped me with CSS layout- a way to put big bright borders around divs and highlight their containing blocks, etc. I *don't* want that in composer, mind you, because I prefer to play with the raw source in an editor and reload the page to see how it looks.
Re:Also, CSS debugging help (Score:2, Informative)
The test_styles bookmarklet [squarefree.com] might fit the bill - it pops up a little window where you can type in CSS rules and have the page you triggered it from dynamically update based on the rules you enter. I put this bookmarklet into my Personal Toolbar Folder in mozilla, so it's just a click away.
There's HEAPS of useful bookmarklets linked off that page too. The javasc
Re:Also, CSS debugging help (Score:2)
iCab, yes (Score:2)
A comparable plug-in would be cool, and would underscore Mozilla's standards-compliant MO. (That's its M.O.zilla, citizen.)
The iCab face is dang particular, though, and it seems like your page's rating has to do with the number of standards violations. You don'
Re:Validity checker and indicator (Score:2, Informative)
http://bugzilla.mozilla.org/show_bug.cgi?id=471
Holy crap, that's an *excellent* idea (Score:2)
Anybody know how to go about requesting this feature? Or, better yet, know how difficult this would be to implement? This kind of changes seems rather fundamental, and I would imagine difficult to do. However, Moz seems pretty well architected, so I wouldn't be surprised if this turned out not to be the case.
Man. If I could just see an icon that indicated valid/invalid documents, life would be so much easier.
Re:Holy crap, that's an *excellent* idea (Score:2)
Opera feature (offtopic) (Score:3, Interesting)
Re:Validity checker and indicator (Score:2, Informative)
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.o
a few criticisms (Score:3, Interesting)
The other problem with the source viewer is that Mozilla goes to the server to grab the source, not using the exact source displayed on the screen if you're using dynamic server side variables (PHP), whereas IE gives you the source of whatever's in memory and displayed on the screen.
Other than that I prefer Mozilla too.
Re:a few criticisms (Score:5, Informative)
Re:a few criticisms (Score:2)
Yay fer verbose article texts! (Score:4, Funny)
American AC in Paris [snowplow.org] writes "In this thread, we will describe some very cool features in Mozilla which will enable you to quickly find the maximum load of your web site and applications."
load testing (Score:2, Funny)
15 comments and already slashdotted.
The real article (Score:5, Funny)
Some people never learn. (Score:2, Flamebait)
Web Development Bookmarklets (Score:5, Informative)
Re:Web Development Bookmarklets (Score:2, Informative)
Another cool set of tools are the Mozilla Sidebars [netscape.com] available over at Netscape's DevEdge [netscape.com].
Basically they add quick references into the sidebar for a variety of official standards as CSS2, CSS2.1, HTML 4.01, DOM 2, XSLT 1.0 Reference, and the Gecko DOM Reference.
Now I've installed them I use them all the time; and to think for ages I thought Mozilla's Sidebar was useless! Very handy, it is.
Variable timeout? (Score:4, Interesting)
I write web applications in Common Lisp, so when developing I have the Lisp top-level open and running. Errors on the server side pop up a Lisp debugger on the thread doing the transaction, I can poke around in the stack, figure out the problem, even fix it and continue - but only if I do it quickly, before the browser decides it's waited on me long enough and closes the connection, which causes a broken-pipe error on the server side and can clobber my debugger session.
So, anybody know how to make any decent browser never time out? Mac OS X browser preferred, but I'll take Linux or Windows in a pinch.
Re:Variable timeout? (Score:3, Funny)
Re:Variable timeout? (Score:5, Informative)
Re:Variable timeout? (Score:2)
So, I mung my preferences.js file, adding something like:
user_pref("network.http.request.timeout", 3600);
I'll try it. Thanks!
Re:Variable timeout? (Score:2)
Re:Variable timeout? (Score:2)
wget might do what you need. The -T option lets you play with the timeout if 15 minutes isn't enough.
Re:Variable timeout? (Score:2)
1. Download the Mozilla source
2. Find the code that closes the connection when a timeout interval has been reached
3. Comment it out
4. Recompile it
5. Run
(You'll notice I've left
6. ???
7. Profit!
off the list, since those are already part of the standard Netscape/Mozilla business plan)
Re:Variable timeout? (Score:2)
Gerv
anyone? (Score:3)
ill gladly put up a mirror...someone send me the files
full text (Score:5, Informative)
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
Something I miss when testing websites locally... (Score:5, Informative)
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 [microsoft.com] tool available as part of a powertoy (er, Web Development Accessories) for web developers.
Re:Something I miss when testing websites locally. (Score:2)
No wonder mozilla is so bloated. (Score:2, Interesting)
Mozilla dosen't even support editing in "view source". Other browsers let you call your own external editor, but not mozilla!
The truth hurts
Re:No wonder mozilla is so bloated. (Score:3, Insightful)
But I guess however I'm in a troll feeding mood. So lets examine a few facts:
A) Mozilla is 4 apps in one. Some people like this, some people don't. If you don't like it then use Phoenix or one of the other stand-alone browsers
B) For an app that is four apps in one, Mozilla has a relatively small foot-print. I've got several tabs open and the mail client right now and its only using 48 megs (mostly just idle i
Nothing beats.... (Score:3, Insightful)
I for one, have never found myself doing any debugging in the browser past printing to it from php. Thats how i debug, simple. My html is rarely at fault, and if it looks good in IE or Phoenix, then it rocks. I dont do javascript. I dont do stuff client side. Theres nothing for the client to debug, job done.
As an aside, this article struck me as less of a "handy things in mozilla" and more of a "oooh look at what mozilla does over IE". It really struck me as that, another flag waving rather than truely informative.
Re:Nothing beats.... (Score:3, Informative)
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.
One more feature request: IE emulation (Score:5, Interesting)
I know, I know, I should post these requests on bugzilla..
Re:One more feature request: IE emulation (Score:3, Insightful)
The whole point to mozilla is to compete with IE. They are producing a superior, standards complaint browser that will eventually force microsoft to clean up their act.
Re:One more feature request: IE emulation (Score:2)
Re:One more feature request: IE emulation (Score:3, Interesting)
And we won't even get into IE differences between platforms either...
Personally, one of the singularly biggest and best features of Mozilla is that it plays well with others. You can have multiple versions of it installed at a time on one box. Any webdev worth their salt will have a copy of every major browser tha
Re:One more feature request: IE emulation (Score:3, Interesting)
I haven't looked at the rendering engine code since the early gecko days, but you can bet that there are a lot of quirks in there to get pages on major sites that were designed for IE to render as the designers intended. Gecko may be standards compliant, but for ages the Debug menu had a long list of major sites that were important to render correctly.
While I agree with you that it's probably not as easy as I suggested, I do think that the moz dev
Opera's handy access to alternate rendering modes (Score:4, Informative)
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:
dremweaver (Score:2)
if you do serious web dev., then DW is far from expensive. and it will generate correct html, even if you use lots of fireworks dhtml, or layers. it will do all your checking, and it can check for browser differences. no, it's not open source, but at least DW is very platform nuetral. it does CF, asp, php, etc. yes you need windows or a mac, and that is a drawback.
Live HTTP Headers?? (Score:3, Informative)
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.
Re:Live HTTP Headers?? - it's an add-on (Score:3, Informative)
Mozilla's gratuitous changes drive me nuts (Score:3, Insightful)
A big fan of Mozilla, but I do have to admit that I would prefer it if things remained a tad bit more stable.
For example, from the 1.2 to 1.3 release of Mozilla the "New Tab" popup menu item moved from the 0 (zero) position in the popup menu to the 2 position.
From a day to day useability standpoint it's annoying for the menu's and the like to change around but just try to write certain automated test programs with that sort of thing going on.
I know that Mozilla is usually advertised as "test platform" but that doesn't mean that it also should serve as a point of frustration for those who would like to be able to count on a feature existing from one dot release to another.
Other than those sorts of things I love the darn thing.
Over...
Re:Mozilla's gratuitous changes drive me nuts (Score:2)
Are you doing automated testing of web apps? What tools are you using? I've been looking for something that does that...
Thanks,
Gerv
Re:Mozilla's gratuitous changes drive me nuts (Score:3, Informative)
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
More on Cookie Handling (Score:3, Interesting)
In mozilla the "more" dialoge starts up open if it was open last time, but the IE dialoge always starts closed, so I have to hit "more info" each and every time. Because of this mozilla is a big winner there for me, just from this one small detail.
The nay sayers will say "no one does that", but I say that for the minority of us out there, it *does* help, and the majority will never see or be affected anyway...
Still room for improvement. (Score:2, Interesting)
Have a live console which shows the HTML errors
this would be very useful for web development.
I do know about the online validators but
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.
a very slow process.
2) In the cookie tool i need a function
which remove the cookies from the current site.
So you don't have to look
Re:Still room for improvement. (Score:3, Informative)
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 [htmlhelp.com] 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:
Re:Mozilla vs IE (Score:2)
In the meantime, there's this [mozdev.org]