digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

See the original image at sixrevisions.com

9 Practical Uses of Firefox's Web Developer Tool

sixrevisions.com — A guide on how to effectively use the Firefox Web Developer extension to speed up and enhance your web-building.

Bury
show profanity settings
expand all
  • mikehill33, on 02/14/2008, -27/+9GREAT article.
  • zohaibusman, on 02/14/2008, -26/+5nice
  • faizaa, on 02/14/2008, -27/+4nice share... thnx
  • SenorCoconut, on 02/14/2008, -26/+4thanks for this good info
  • myNeonSun, on 02/14/2008, -7/+8I've never explored Developers' extension that good before nevertheless I used to use it sometimes :)
  • jggube, on 02/14/2008, -17/+5Thanks guys/gals, and expect more practical, useful development/design articles like this at my blog.
  • armo, on 02/14/2008, -2/+33I don't know how I ever lived without this extension or firebug. Both great tools that make development so much easier.
    • Mardala, on 02/14/2008, -2/+5That was my first thought, "What no firebug?" ... seriously, this is the best extension for a developer.
      Also, he does mention developing on a live server and I think that is generally a really bad idea, no excuses. If you are too lazy to have a development environment setup then you should retire. Unless its your own site and you could care less.
    • CrushThemTorg, on 02/21/2008, -0/+2Firebug is probably one of the more beautiful things ever.
  • YouRookies, on 02/14/2008, -13/+9No digg. Spam with fake comments.
    • algo, on 02/14/2008, -2/+9the comments are a bit spammy but now i know about the populate fields feature, so i dugg.
    • j4200, on 02/14/2008, -1/+2Your spam filter is broken. Real information isn't getting through.
  • tfrans, on 02/14/2008, -1/+37Web Developer Toolbar + Firebug = easy life. If only we could banish ie6.

    On another note, #1 the on the fly css editting would be so much more useful if you could save a local copy to your machine.
    • Huangism, on 02/14/2008, -3/+0you can just copy it and paste it and save it... u lazy bum
    • diggduggj, on 02/14/2008, -3/+1just hit the save button...
  • FBMGriever, on 02/14/2008, -1/+22I still think that Firebug is the ultimate web developer tool. I'd be lost without it.
  • acatzr800, on 02/14/2008, -4/+4Good article, but frankly, the toolbar does so much more. My fav is just hitting Ctrl+Shift+H to see if my XHTML1.1 is checking out.
  • algo, on 02/14/2008, -4/+2x) modify a webpage to screenshot and make someone look stupid.
  • importantname, on 02/14/2008, -3/+5One thing I *always* use in the Web Developer plug-in is Forms --> Enable Auto Completion. I only access my financial accounts from my home computer, but most of them have Auto Complete disabled, e.g. <form autocomplete="off" etc.>. By enabling Auto Complete with this plug-in, I don't have to keep entering my username and pw info every time I go to the site.
  • chadu, on 02/14/2008, -5/+3Does someone actually need a guide to see how useful this tool is?
  • JParsons4, on 02/14/2008, -2/+1I like using it just to display form details on my 2nd monitor so I don't need to be alt-tabbing each time I need to reference a form field
  • lava, on 02/14/2008, -1/+11My favorite one is View Source > View Generated Source. I use that to see what javascript generated. For example, tumblr lets you embed your posts via javascript, but I wanted to stylize what it put out. I couldn't find any documentation on that from tumblr, so I checked the generated source and I got the class names from that.
    • 15charmaxwtf, on 02/14/2008, -0/+2Firebug's also good for that kind of thing you can see a live generated view.
  • cremate, on 02/14/2008, -4/+4Good read.
  • CeeJayDK, on 02/14/2008, -2/+2Web Developer is great , but for site optimization I prefer firebug with Yslow installed.
    The two doesn't cover all my needs though .. I need a program or extension that can crawl a website and build a sitemap of it, so I can easily get an overview of a complex website when I do quality assurance of customers websites .. any suggestions ?
    It would also be nice, if the tool could check all the links, and alert me if some of them are invalid.
  • Huangism, on 02/14/2008, -7/+1why did the first few posts get dugg down? i thought people liked firefox. did ff become the new IE now? i dunno what's going on!
    • 15charmaxwtf, on 02/14/2008, -0/+5If everyone who dugg the article wrote "Thanks for the great info"...you get the idea.
  • RichGC, on 02/14/2008, -1/+4I use webdeveloper all the time, but have never bothered explorering all the options, *raises hand in shame* for screenshoting to measure pixel sizes, wish I had known about the ruler option earlier.

    My personal favourite options are view source with a custom application ( notepad++ ) and find broken images.
    • jggube, on 02/14/2008, -0/+5notepad++ is the other free app I use regularly.
  • 4lun, on 02/14/2008, -1/+2Is there an update for the web developer toolbar so I can use it with Firefox Beta 3? I miss it so much I think I might go back to FF2
    • oxygenws, on 02/14/2008, -0/+1You can change it on your own and make it compatible with FX3.
      If you trust me, you can download changed version from here: http://rapidshare.com/files/91875886/web_developer ...
      Have fun.
      • tdous, on 02/15/2008, -0/+2If you look at the site of the guy who made the extension (google it - Chris Pederick or something) he mentions that the "changed" version doesn't work totally 100% but it's safe to use so go for it, and meanwhile he's working on updating it right now.
  • haoest, on 02/14/2008, -2/+2#2 pimps.
  • tehnico, on 02/14/2008, -1/+2I use Firebug for design/layout and Web Developer Extension for everything else program-esque. Like session managing and form populating.
  • Phegan, on 02/14/2008, -1/+4How to use the Web Developer Tool to speed up Web Development:
    Step 1: Use it.
    Step 2: There is no step two.

    • tikal2k, on 02/22/2008, -0/+0Web Developer is incredible, highly recommended.
  • Goobernutz, on 02/14/2008, -3/+4Just 9? I can think of at least 50. And that's without reading the manual.
  • lovecss, on 02/14/2008, -1/+1'Disable', 'Outline -> Current Element', 'Resize', 'Miscellaneous -> Ruler' and the 'Validate' options are among my personal favourites.
  • polyGone, on 02/14/2008, -0/+6I use CTRL+SHIFT+S to get rid of the CSS, so my boss thinks I am working on something legitimate.
  • sherifgmansour, on 02/14/2008, -0/+1It is an awesome extension to use in the web. I use it all the time. Some good tips listed there.

    I've also listed my top 14 Web Developer Extensions for Firefox: http://blog.sherifmansour.com/?p=34

    (Yes there are many others - other than the web developer extension itself!)
  • floatingpoints, on 02/14/2008, -0/+2"For example, the Yahoo! home page has over 2,400 lines of CSS, spread over several external stylesheets and inline styles (Bob, you built this page didn’t you?)."

    LOL. Proof these large companies have clueless designers working for them.

    Yahoo's page is insanely simple. Why the ***** does it need 2400 lines of CSS? Waste.
    • nonconformist, on 02/14/2008, -0/+3Agreed. Most of the big fortune companies are poorly coded and non-standards compliant. What's up with that?
  • nonconformist, on 02/14/2008, -1/+1Only 9? I can think of more - it's the best web dev tool ever. It's a perfect example of how IE is still miles behind Mozilla.
  • o0JoeCool0o, on 02/15/2008, -1/+2great post use web developer and firebug endlessly when working on bizzvo.com. I think I use firebug alot more mainly for its console tab which shows posts and script errors and the script tab that lets you actually break javascript code and step through is a freaking GODSEND . but the web developer extension is nice for ruler resizing window, also the colorzilla extension is a must go grab it if u dont have it.
  • juliend2, on 02/15/2008, -0/+1Another thing that speeds up the coding: it's the 'ReloadEvery' plug-in for firefox. I set it to reload every second on my right screen and I code in Dreamweaver on my left screen. As soon as I hit CTRL+S I just look at the right screen to see if it's OK. No ALT+TAB to switch the window and CTRL+R to reload. A big time saver.
  • kevyn, on 02/15/2008, -0/+1I used to love this extension...till it stopped working properly...

    literally- the tool bar just vanished and left a blank space where it used to live. I have reinstalled and reinstalled, and it has never come back. damn thing.
    • DestroyFascism, on 02/15/2008, -0/+1Re-install the fox....
      • jrosine, on 03/10/2008, -0/+0that doesn't work. nothing works. minefield ff3 has same problem with web developer toolbar.

        ff sucks oh well.
  • henhouse0, on 02/15/2008, -0/+1Interesting. I'll need to try out the newest Beta. Firefox FTW.
  • withremote, on 02/15/2008, -0/+2Got it yesterday, It's already saved me time. worth it's weight in 1's and 0's
  • Tacobake, on 02/15/2008, -0/+2looks interesting.
  • frugalweb, on 02/16/2008, -0/+0Web Developer is the greatest. My favorites are ctrl-shift-f and ctrl-shift-Y for CSS editing. Another awesome extension is colorzilla
  • yogastore, on 06/27/2008, -0/+0http://astore.amazon.com/flowtron.mosquito-20
    http://astore.amazon.com/flowtron.insect.killer-20
    http://astore.amazon.com/evaporative.air.cooler-20
    http://astore.amazon.com/air.swamp.cooler-20
    http://astore.amazon.com/braun.electric.kettle-20
    http://astore.amazon.com/cordless.electric.kettle- ...
    http://astore.amazon.com/canon.battery.charger-20
    http://astore.amazon.com/12.volt.battery.charger-2 ...
    http://astore.amazon.com/furniture.chaise.lounge-2 ...
    http://astore.amazon.com/outdoor.chaise.lounge-20
  • mhmdkhamis, on 07/03/2008, -0/+0great post use web developer and firebug endlessly when working on bizzvo.com. I think I use firebug alot more mainly for its console tab which shows posts and script errors and the script tab that lets you actually break javascript code and step through is a freaking GODSEND . but the web developer extension is nice for ruler resizing window, also the colorzilla extension is a must go grab it if u dont have it.

    http://xn--ggbl0a6e.xn----ymcae0df5a6fo.com
    http://xn--ggbla3do.xn----ymcae0df5a6fo.com
    http://xn--lgbbh5bya5gqa.xn----ymcae0df5a6fo.com
    http://xn--mgb0a6bn.xn----ymcae0df5a6fo.com
    http://xn--mgb0azbm.xn----ymcae0df5a6fo.com
    http://xn--mgb4a6an.xn----ymcae0df5a6fo.com
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.