Web Developer - extension for FireFox

My #1 tool in developing web pages

[SethCall]

Let me preface this post with the fact this sounds like an ad or something: it's not: but I assure you, this tool rocks. On to the meat of this post:

I just downloaded the latest version of Mozilla Firefox, and downloaded as a seperate extension "Web Developer 0.8".

It's awesome...

Let me just make a list... but please, just download it and see. You will be using this tool I assure you for a while to come.

A decent summary:

• Dynamic updating of css of a given page
  
• Images: show their paths, sizes, point out images with no 'alt' attributes, etc.
  
• All types of page info (cookies, headers, more...)
  
• Utils to clear cache, session cookies, javascript debugger
  
• Helpful outlining: like outlining all block elements
  
• Resize the browser window to various resolutions
  
• Validation : HTML/XHTML, css, validating of link...
  
• Disabling of images, javascript, ...
  
• Links to specifications: css1, css2, HTML, XHTML, DOM...
  
• Manipulating Forms ... various utilities
  

[isitreal]

Web developer tool bar is definitely a best in show item, and it's getting better all the time. For those who haven't checked it out yet, visit Chris Pederick's tool bar extension website [chrispederick.com], he definitely deserves a pat on the back for his efforts.

You can download it there, or just grab it by clicking the 'get new extensions' link on your extensions manager.

It really is a web developer tool bar, it took me a while to get used to having everything I needed at a mouseclick away, very nicely done.

[tedster]

I've been playing around with the Developer Extension today - extremely helpful stuff there. So far it's the outlining feature that's got me hypnotized. One click and I immediately see my choice: block level elements, deprecated elements...even a custom list of element types that I create.

I can see that it will take some time to get used to having these great tools right at hand -- I'm already habituated to doing it the hard way.

[Strange]

I've been using the Web Developer Toobar for quite several months now.. I can attest to it's usefulness. I have saved so much time with these tools right at hand. I would recommend anyone using Firefox or Mozilla to acquire this tool.

[isitreal]

A nice extension to the web developer tool bar extension is the useragent toolbar widget [uabar.mozdev.org], you have to add that manually to the web developer toolbar, but it's very useful to do quick checking of custom browser stuff working right, in other words, is a browser detection script working or not? This saved me many hours of debugging recently, since I could tell my scripts I was the googlebot, etc.

This really helps deal with browser issues in general, not of course the actual display problems, but the browser id'ing component of scripts, still sadly required for almost all advanced CSS I run.

[MatthewHSE]

I love the "real time" CSS editing and the window resize features. It's a tremendously useful plugin.

[flashfan]

It's terrific. I love it!

[ergophobe]

liveHTTPheaders extension can be useful too. Basically, once installed, it adds a "headers" tab to the Page Info window.

[livehttpheaders.mozdev.org...]

[SethCall]

Whew, I was worried the thread may get deleted because it looked like a shameless sell of it ;). I just had to get out the word to those who weren't aware of it.

True, the EditCss functionality is very possibly its #1 ability in my eyes.

As you say, LiveHttpHeaders is no doubt a really cool extension too...

[tedster]

No moderator action from me. It's all open source freeware, designed to make a browser user happy and served up from non-commerical pages.

Thanks for the "hard sell". It's good stuff.

[vkaryl]

It IS good stuff, and thanks a bunch for the heads up! Probably wouldn't have found it otherwise, and so far it has to be the absolute next best thing to bubble gum.

[Purple Martin]

Just tried it on an XP laptop (it doesn't work on NT) and I love it too. Very cool stuff!

[dauction]

Speaking of Firefox extensions...without getting to side tracked..Do any of the Calendar extensions work? I tried installing the first 2 without getting either one to work.. XP machine

[Larryhat]

Hi guys: I agree the Webmaster toolbar extention is great. One question:

For the sake of normal (non-webmaster) browsing, how do I turn it off to open the screen real-estate that the toolbar now occupies? I hope there's an easy way to turn it on and off. - LH

[bill]

Good question Larryhat. I was wondering that as well. I found that you can right click on the toolbars and uncheck it. When you want it back just right click on some unused real-estate in the menu and reselect the Webmaster toolbar.

[Larryhat]

Hello Bill:

Great fast answer! I right-clicked on Web Developer and turned it right off by unchecking it in the
drop-down. Turning it back on is a little harder.

I had to r-click on the TOP Firefox toolbar, then I could check Web Developer back on again.

Thanks much! A really good tool. -LH

[edit_g]

Wow - now I'm surfing with gas! :) Thanks guys.

[ergophobe]

edit_g

There are a variety of over the counter products that can help you with that.

Tom

[MatthewHSE]

Has anyone else noticed the Page Info button on this toolbar? By default it's the third from the right, at the far right edge of the toolbar. It shows at a glance whether a page is rendering in Quirks Mode or Standards-Compliance Mode.

Now if there were only a way to turn on some sort of validator . . . ;)

[ergophobe]

Matthew, is that a joke?

My third button from the right *IS* the Validation button. It goes (from right) Options, View Source, Validation.

As for the "Page Info" button, that's just the same as Tools ¦ Page Info

Tom

[MatthewHSE]

No, no joke. Yes, counted that way Validation is the third button from the left, if you only count one "grouping" of buttons. But the Web Developer toolbar, for me at least, has two "groupings" like this:

Disable
CSS
Forms
Images
Information
Miscellaneous
Outline
Resize
Validation
View Source
Options

Then there's a space, and at the far right of the toolbar are three more buttons:

Page Information
Javascript Errors
Disable WD Toolbar

And my remark about validation was just an idea I had thumping around in the back of my head about a "live" validator that would automatically check a page and display a valid or invalid icon.

Sorry for any confusion; hope this helps clarify things a bit!

[ergophobe]

Ahh, got it!

I was sort of confused when I counted three from the right and saw "validation". Now I see the little buttons on the far right. I hadn't noticed them before and at first thought the "?" button was a help button, not Page Info.

Tom

[MatthewHSE]

Right, you'll find that when a page is rendered in Standards mode, the "?" button becomes a checkmark instead. Very handy!

(And it's surprising how few sites render in Standards mode; even WW renders in Quirks! ;) )

[vkaryl]

Yah.... when I realized what that little button with a check meant, I was surprised. Then when I noticed that only about one page-view out of 50 or so GOT the check, I was surprised again.

And btw, THIS page (the "compose reply message" page) does NOT get a check mark....

[CritterNYC]

There are so many gems within the Web Developer toolbar.
You've played with the "View Style Information" function, right? Click CSS and then View Style Information (or click CTRL-SHIFT-S) and the pointer turns into a crosshair. Click on any element and you'll find out all the style rules applied to it. Great for trying to figure out if your rules are being applied correctly.

[ktwilight]

very handy tool indeed.

though i think the resize tool would work best if the resolution changes instead of the window.

[ergophobe]

I wouldn't want that. Every time I change resolution, I need to tweak the monitor to get it back to perfect sizing. Also, pretty much nobody with a 21 inch monitor will run at 800x600 so it probably gives a better impression of how it looks on those sizes to use part of a 21 inch monitor than to adjust the resolution.

Tom

[MatthewHSE]

I also would prefer the resolution not to change. Adjusting the window size is sufficient for testing purposes. The only reason I can think of for the resolution itself to change would be to view graphics at the exact size others will see. But even that would change according to screen size.

[stevenmusumeche]

It doesn't actually change the resolution of the monitor, it just resizes the browser window to that size.

[isitreal]

Now I'll have to see if I can get Chris Pedericks user agent switcher to install on the web developer toolbar, the other user agent widget thing I was using on Firefox 0.8 doesn't seem to work on Firefox 0.9, but being able to add it to the web developer tool bar as a drop down list is extremely useful to test browser detection on your pages, the code itself, that is.