Welcome to WebmasterWorld Guest from 54.224.148.71

Forum Moderators: incrediBILL

Message Too Old, No Replies

Web Developer - extension for FireFox

My #1 tool in developing web pages

     
3:01 am on Jun 17, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 0


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
4:29 pm on June 17, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 15, 2004
posts:1300
votes: 0


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.

5:10 pm on June 17, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


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.

5:32 pm on June 17, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 19, 2003
posts:136
votes: 0


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.
5:36 pm on June 17, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 15, 2004
posts:1300
votes: 0


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.

6:24 pm on June 17, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 9, 2003
posts:1908
votes: 0


I love the "real time" CSS editing and the window resize features. It's a tremendously useful plugin.
8:28 pm on June 17, 2004 (gmt 0)

Full Member

10+ Year Member

joined:Feb 24, 2004
posts:219
votes: 0


It's terrific. I love it!
2:57 pm on June 19, 2004 (gmt 0)

Moderator

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8219
votes: 122


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

[livehttpheaders.mozdev.org...]

11:55 pm on June 20, 2004 (gmt 0)

Preferred Member

10+ Year Member

joined:Sept 24, 2002
posts:364
votes: 0


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...

12:07 am on June 21, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:May 26, 2000
posts:37301
votes: 0


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.

1:23 am on June 21, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 19, 2003
posts:1747
votes: 0


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.
2:38 am on June 21, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 21, 2002
posts:977
votes: 0


Just tried it on an XP laptop (it doesn't work on NT) and I love it too. Very cool stuff!
2:50 am on June 21, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 7, 2002
posts:906
votes: 0


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
5:52 am on June 21, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 6, 2004
posts:164
votes: 0


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

6:19 am on June 21, 2004 (gmt 0)

Administrator from JP 

WebmasterWorld Administrator bill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 12, 2000
posts:14658
votes: 66


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.
6:33 am on June 21, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 6, 2004
posts:164
votes: 0


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

6:55 am on June 21, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 3, 2002
posts:1590
votes: 0


Wow - now I'm surfing with gas! :) Thanks guys.
4:41 pm on June 23, 2004 (gmt 0)

Moderator

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8219
votes: 122


edit_g

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

Tom

4:52 pm on June 23, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 9, 2003
posts:1908
votes: 0


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 . . . ;)

6:12 pm on June 23, 2004 (gmt 0)

Moderator

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8219
votes: 122


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

6:20 pm on June 23, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 9, 2003
posts:1908
votes: 0


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!

7:31 pm on June 23, 2004 (gmt 0)

Moderator

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8219
votes: 122


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

8:02 pm on June 23, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 9, 2003
posts:1908
votes: 0


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! ;) )

1:05 am on June 24, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 19, 2003
posts:1747
votes: 0


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....

5:29 am on June 24, 2004 (gmt 0)

Full Member

10+ Year Member

joined:Feb 23, 2003
posts:207
votes: 0


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.
11:11 am on June 24, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:May 4, 2004
posts:50
votes: 0


very handy tool indeed.

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

2:39 pm on June 24, 2004 (gmt 0)

Moderator

WebmasterWorld Administrator ergophobe is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Apr 25, 2002
posts:8219
votes: 122


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

3:28 pm on June 24, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 9, 2003
posts:1908
votes: 0


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.
3:30 pm on June 24, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 8, 2004
posts:196
votes: 0


It doesn't actually change the resolution of the monitor, it just resizes the browser window to that size.
3:33 pm on June 24, 2004 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Jan 15, 2004
posts:1300
votes: 0


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.
This 35 message thread spans 2 pages: 35