Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

Web Developer Extension - A web page dev toolbox Pick of the Week
WebDeveloper Extension The macosxhints Rating:
10 of 10
[Score: 10 out of 10]
Yes, it's another web-development-related PotW. Sorry, but I'm pretty heavily into the new site's development, and have been spending way too much time in multiple browsers, editors, and forums figuring out how to make the new site even better. The Firefox Web Developer Extension (WDE for short from now on), which I discovered after reading about it in the comments to a previous PotW, has become an invaluable part of the process. This free plug-in adds a handy toolbar, just above your tabs, with all sorts of interesting features. In the image at the top left of this hint, for instance, it's outlining all of the table cells on CNN's homepage (click the image or here for a full-size version):


In addition to making table layouts relatively obvious, the other WDE feature I've been using a lot is the "Edit CSS" menu -- this puts the site's CSS in the Firefox sidebar, and any changes you make in the sidebar are immediately reflected in the page. There's even a "Reset all," which will restore the functional CSS after I mess it up with my changes :). This is a great way to learn about CSS, as you can see what each line does to the page (note: don't start with something complex like CNN.com!).

This is just scratching the surface of WDE; among its myriad other features are the ability to find broken images, display image dimensions, find missing ALT and TITLE attributes, display a whole bunch of info about the page, clear the cache (very useful, even if you're not a web developer), reset the 'visited' state of all links on the page, resize the window for smaller displays, and an easy way to send the page to the HTML, CSS, etc. validators.

If you do any web development at all, you'll probably find a use for the WDE -- I know I've given it quite a workout in the few weeks I've been using it!
    •    
  • Currently 1.13 / 5
  You rated: 1 / 5 (8 votes cast)
 
[16,975 views]  

Web Developer Extension - A web page dev toolbox | 18 comments | Create New Account
Click here to return to the 'Web Developer Extension - A web page dev toolbox' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Firefox WDE vs. CSSEdit
Authored by: gerardiki on Oct 20, '04 10:54:29AM

in terms of the CSS editing, does Firefox WDE constitute not paying for CSSEdit? (the PotW from a few weeks ago?)

---
***
"i was born to rock and built to last
you'll never see my feet cuz i move so fast"
***



[ Reply to This | # ]
Web Developer Extension - A web page dev toolbox
Authored by: mrchucho on Oct 20, '04 11:33:00AM

I'll second that! The Web Developer extension is excellent. I've found it to be my most invaluable tool for developing HTML/CSS. Some of the great features include: being able to selectively enable or disable different HTML and CSS elements (include enabling disabled form fields...), highlighting and getting information about all sorts of things (down the the ID and CLASS level) and easy access to HTML, CSS and JS validation. Two of my *favorite* things are: the "Resize" menu for resizing your browser to standard resolutions (e.g. 800x600, 1024x768, etc.) and the Quirks/Standards Compliance and Javascript badges -- instant feedback! What a great extension!

RMC



[ Reply to This | # ]
Web Developer Extension - A web page dev toolbox
Authored by: pvera on Oct 20, '04 12:24:40PM

My only beef with this excellent extension is that view source pulls a fresh copy of the page, which means it only works if the page is either static or depends on GET or cookies. If there was a POST, it won't pull the page properly.

That said, this is one of the most useful extensions I have seen so far. I really dig the resize tool because I work off a Powerbook and it keeps me from going insane every time I need to see a test page at a standard resolution like 1024x768.

---
Pedro
-
http://pedrovera.com



[ Reply to This | # ]
Agreed
Authored by: Kylector on Oct 20, '04 06:28:59PM

I agree. I don't understand why so many browsers go out and get a new version of the HTML to display when they already have a copy right there in memory! Plus, as you said, any form data that was used is gone, which really defeats the purpose in many cases. Very, very, very annoying.



[ Reply to This | # ]
Web Developer Extension - A web page dev toolbox
Authored by: maddys_daddy on Oct 20, '04 03:12:23PM

Sorry, a little off topic, but rob, what theme is that you're using? It's nice, clean, and simple, and, other than the navbar icons, bears some resemblance to Safari. I like it.



[ Reply to This | # ]
Web Developer Extension - A web page dev toolbox
Authored by: genericuser on Oct 20, '04 05:25:33PM

That's the default theme that ships with Firefox 1.0PR

---
Bugmenot public account



[ Reply to This | # ]
Web Developer Extension - A web page dev toolbox
Authored by: maddys_daddy on Oct 22, '04 01:42:50AM

Oh.
Man, don't I feel stupid now. I'm one of those kinds of people who runs out and downloads my favorite theme right away, without really looking at the original. Actually, I prefer the navbar icons of the noia set, but I like the other features (tabs, tab decos, favorites bar look, etc.) of the default theme. Thanks. I feel dumb now. ;)



[ Reply to This | # ]
Web Developer Extension - A web page dev toolbox
Authored by: gaoshan on Oct 20, '04 06:08:59PM

I use basically the same setup in Camino, however mine is a homemade solution (because Camino is better than Firefox. ;)

The original creator of this web developer set of tools is Jesse Ruderman and he provides all of the bookmarklets that make up the Firefox extension (and then some) on his site at:

http://www.squarefree.com/bookmarklets/webdevel.html

I just downloaded them and put them all in a folder that I keep in my Camino bookmark bar. This gives me the same capability as the Firefox extension (just not as purty).

I currently have over 20 of these bookmarklets in use. Check it out and then you can get back to using the wonderful Camino broswer and won't have to use Firefox so much.



[ Reply to This | # ]
Web Developer Extension - A web page dev toolbox
Authored by: gaoshan on Oct 20, '04 06:10:46PM

Oh... FYI, you will need to turn off "block popups" to get these to work in Camino.



[ Reply to This | # ]
Web Developer Extension - A web page dev toolbox
Authored by: billbarstad on Oct 21, '04 12:25:52PM

I didn't have to...



[ Reply to This | # ]
I provide similar tools
Authored by: samrod on Oct 24, '04 10:00:22PM
Some of Jesse's Bookmarklets are based on my web development ones at samrod.com.

While I think some of these FireFox extensions are pretty cool, and I will likely be using them myself and likely improving some of mine accordingly, I think a few of mine are in some ways better. I prefer my "Forms" bookmarklet over the "View Form Information" in the FF extension because mine presents the information in a clearer, more understandable layout. I think I'll be adding controls to some of mine to toggle form methods and other such properties.

But overall, I prefer mine because, while I don't have nearly as many as the FF extensions, they're all stored in a single toolbar folder I've named "View". I find this more attractive than an entire toolbar spanning the top of my browser.... not to mention that mine also work in Safari and Internet Explorer, in addition to FF & Mozilla.

An additional note, I haven't updated my bookmarklets in a few years and I'm open to suggestions, comments, and criticisms. Either way I think they'll be getting an update soon. Samrod

[ Reply to This | # ]
Web Developer Extension - A web page dev toolbox
Authored by: Eyedea on Oct 20, '04 08:41:31PM

So should somebody tell rob that you do not need a "FindOnPage" booklet?

To do a quick search on a page just press the " / " key and start typing. Of course, if a form's text bor or the location bar is active then this will just put a / in said box so just make sure you aren't in any field.



[ Reply to This | # ]
Web Developer Extension - A web page dev toolbox
Authored by: gaoshan on Oct 20, '04 09:08:19PM

He knows. The / for find as you search was an earlier hint on macosxhints.



[ Reply to This | # ]
Web Developer Extension - A web page dev toolbox
Authored by: seanasy on Oct 21, '04 03:46:44PM

Hmmm... this sounds very cool. Could this be extended to make the browser a WYSIWYG editor? Combine it with webdav, it might work better than some of the CMS editors out there. Or, am I just fantasizing/clueless?



[ Reply to This | # ]
Web Developer Extension - A web page dev toolbox
Authored by: kumar303 on Oct 22, '04 03:01:41PM

there is a javascript-based WYSIWYG editor which supports Mozilla (in beta). It has been in beta for a long time though so it probably works pretty well.

HTML Area
http://www.interactivetools.com/products/htmlarea/



[ Reply to This | # ]
HTML area is nasty stuff
Authored by: alec kinnear on Oct 24, '04 12:56:30AM

I tested HTML area and two other freeware javascript editors RTE and tinyMCE.

Sadly they were all terrible for one reason or another. Html Area simply did not work very well and had too many options (allowing any user to seriously mess up the site). RTE was difficult to customize without playing around with the source Javascript. tinyMCE has a tag stripping function that is difficult to disable and ferocious (any html tags not properly entered in the database will be terminated without prejudice, including their attributes).

In the end, we shelled out the modest fee for WYSIWYG Pro and we were a whole lot happier and so was the client.

An attractive interface, easily configurable, CSS friendly and standards compliant. Some bugs with inline javascript shredding, but they seem to have been cleaned up after regular queries on the developer's forum (which is open to all - always a good sign).



[ Reply to This | # ]
Web Developer Extension - A web page dev toolbox
Authored by: mquattrone on Oct 21, '04 09:30:05PM

Apple offes many of these on the developer site.

http://developer.apple.com/internet/safari/safari_faq.html#dump

Enjoy!

Michael



[ Reply to This | # ]
Web Developer Extension - A web page dev toolbox
Authored by: kumar303 on Oct 22, '04 02:58:37PM

oh and by the way .... more reasons why Firefox will be the next universal browser :
[ browse all extensions here ]
http://texturizer.net/firefox/extensions/

not to mention a big push by the open source community to bring down the IE domination once and for all:
http://spreadfirefox.com/

-kumar



[ Reply to This | # ]