Web developer tools for Moz

[francis]

Interest you in an extension, guv? (http://chrispederick.myacen.com/work/firebird/webdeveloper/). This is why Moz/Firebird is so very cool. Install this extension and take some of the strain away from development. Want to see what your page looks like at 800x600 without going via the Control Panel? You can do that. Want to validate your site for accessibilty without going to the Cynthia site? You can do that. Want to do the same for your XHTML and CSS? Yep. See your page with no images, JavaScript turned off, all your divs highlighted, show passwords as plain text, find broken images, disable cookies, replace images with alt text to see if it makes sense? Oh yes.

[James]

Whilst I still think it is a waste of time coding things that ONLY work in Mozilla (CSS3 etc),

You have convinced me that:

1. Sites should be tested in Mozilla to ensure compatibility.
2. Mozilla is a great development tool for the reasons you state above (although Mr Average surfer is not going to be interested in those tools).

2 out of 3 ain't bad is it mate? I might even change my Avatar soon! :)

[francis]

There's very little CSS3 that works anywhere yet, and those that do use CSS that will only work in Moz (vendor specific CSS (http://www.w3.org/TR/CSS21/syndata.html#q4) for this type of thing was introduced in CSS2.1).

Joe public won't be interested in the extension above, but if it helps in site development, who cares? It's an extension specifically for web developers.

I was wondering about that avatar...

[James Glasheen]

Frankie, this is great!

As a development tool, Mozilla gets first place, I may even move from IE to Moz for eveything bar testing.

Also Frankie, what does it have built-in for blocking aggressive toolbars and other pop-ups?

[francis]

Moz comes with:

Tabbed browsing
Pop-up advert blocking
The ability to stop websites re-sizing or moving browser windows
A good cookie manager
A superb text finding facility (try it: to find text on a page, type / then the text that you want. Use F3 to cycle forward through more text, or shift+F3 to cycle back. Just start typing to find just URLs)
View source has colour coded XHTML
Better security - all of the news group postings that I've seen of late have been from people using IE getting malware installed somehow.
Comes with site navigation bar that adds extra site navigation (if coded) based on <link> elements in the document head. Go to view > show/hide > site navigation bar > (then your choice). Then go to somewhere like the W3C's site and watch your new nav bar spring into life)

Moz 1.6 comes with view source refresh so you can have your source in one tab with your page in another. Change your page and just refresh the source instead of opening another copy of notepad or whatever.

All I want now is for Moz to have Firebird's "spellcheck text in form fields" thing.

Top extensions:

Paste and go (http://extensionroom.mozdev.org/more-info.php/pasteandgo). Such a simple, great idea. Whipped from Opera, I believe)
Web development (http://chrispederick.myacen.com/work/firebird/webdeveloper/)
Live HTTP headers (http://livehttpheaders.mozdev.org/). Find out what the the browser requests and the server is returning to your browser. You can do this using the "web development" extension, but that relies on using an external site. Livehttpheaders does this within Moz (screenshot (http://www.websitearchitecture.co.uk/storr/webstandards/graphics/mozmimetypeshot.gif))
Multizilla (http://multizilla.mozdev.org/). Tabbed browsing taken to the Nth. I couldn't use the Web at home without this. Amongst other things, all URLs with a target="_blank" open in a new tab rather than a new browser window. Bliss. Take care when installing - check your Moz version number before picking a download.

[francis]

Blimey - there's a new version of this extension, and it's got an amazing feature under the "information" tab. It's called "view style information". Click on it and a set of cross-hairs appears. Move the cross-hairs to anywhere on the screen, click the mouse and a new tab opens up with all the relavent styles in it from the linked, external stylesheet. I've got absolutely no idea how that works, but it's rather amazing. There's also a "view depreciated elements" thingy, a very, very handy resize doodah (much easier than going via the control panel for 800x600) , validate 508, WAI, HTML, CSS, local HTML, local CSS, links, and a zoom wotsit that works in a similar way to Opera's, in that it zooms images (but not as well). It's also got little indictaors that show at a glance whether the page is in quirks or standards mode or whether there's any JavaScript errors.

Here's some of the styles from one of the main table cells in this post:


table, tr, td (line 9)
{
font-family: Verdana,Tahoma,Arial,sans-serif;
font-size: 11px;
color: rgb(0, 0, 0);
}

.post1 (line 79)
{
background-color: rgb(245, 249, 253);
}


Minor quibble: it quotes all colours in RGB even if they aren't coded that way (I always use hex), but I'm not too fussed about that. Not got this extension yet? Why?