programming and human factors
by Jeff Atwood
Although I prefer IE7's native speed and feel for day-to-day browsing chores, there's no doubt that Firefox is my primary web development IDE.
Whenever I need to troubleshoot HTML, CSS, or JavaScript, I immediately reach for Firefox. That's primarily because of two incredibly powerful developer extensions for Firefox:
WDE has lots of useful features, but the most wonderful thing about WDE is that everything is editable in real-time. Edit the CSS, edit the HTML, and watch your changes take effect as you type. It's like magic.
2. Firebug
Firebug is a richer tool than WDE; it goes far beyond real-time editing of HTML and CSS, and delves deeply into profiling and debugging JavaScript. It also offers metrics on download time and download order over the wire. I highly recommend checking out the Joe Hewitt Firebug power user demo movie to get a sense of its full feature set.
I can't imagine debugging a web app without these two essential tools, which transform Firefox into the Visual Studio of browsers. It'd be akin to writing a .NET application in Notepad. In fact, I feel so strongly about the utility of these extensions that I'm stopping to donate $10 to each project, right now. This is part of my ongoing monthly contribution to small software vendors.
If you haven't used these tools yet, I envy the experience you're about to have. Download them both and start experimenting. If you have used Firebug and WDE, I encourage you to share your favorite tips in the comments.
There is an IE Developer Toolbar Beta available to have some functionality in IE7:
http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038displaylang=en
Doesn't nearly has the featureset of firebug, but anything is better than nothing ;)
Cheers
SilverViper on April 5, 2007 3:40 AMGood recommendations, I'll check 'em out.
When I want to code my UI for any reason, I always reach for NVU. I'm not positive what its license is, but I've never paid a dime for it and it seems to be based off the FireFox rendering engine.
Jae on April 5, 2007 3:44 AMBy far the most useful thing about Firebug is evaluating javascript expressions in the console. Being able to write javascript and instantly see what will happen because of it is a huge advantage.
I usually still use WDE for editing CSS, because I feel the CSS editing in Firebug is a little clumsy at best.
Firebug is a like a really good book. Sometimes you just wish you would forget about it so you can go back to the time you first read it and discover it all over again.
Eric A. on April 5, 2007 3:54 AMI use both of these tools and *love* them.
The only drawback is that I need a bigger monitor. When I'm seriously debugging a site, I will commonly have both WDE's CSS editor open, as well as Firebug. It takes up a lot of the screen when I'm also trying to see what the site will look like at 1024.
But if it means the boss buys me a new monitor, then I guess it's not a problem after all :)
Lucien on April 5, 2007 4:06 AMOut of curiosity, what's WDE do that Firebug doesn't? Firebug offers realtime HTML and CSS editing among its other features, so it seems odd to use another tool to do that.
I've been using Firebug for...quite a while, and I absolutely love it. I would go so far as to say that it is the single-most important web development tool I have, bar none. Doing any kind of Javascript debugging, CSS work, or AJAX development without it is an exercise in pain. I can't recommend it enough.
Chris Heald on April 5, 2007 4:22 AMI just re-read the article, and you asked for favorite tips, so here are mine.
* The "Inspect" button. Most useful feature in the whole suite, in my opinion. Select it and mouse over elements in the page to see their bounds (which is useful when building a layout), and click an element to pull it up in the source tree, and gain access to, among other things, its Style definitions. Firebug makes debugging CSS a dream - you can see all the style declarations that apply to the selected element, which file they originate in, and whether or not they've been overridden by another declaration later on (overridden styles have a strikethrough). This is utterly invaluable in trying to trying figure out why a style won't apply to an element - it makes tracking down conflicting declarations beyond trivial. If you are doing any kind of in-page Javascript, it is invaluable. You can inspect elements in realtime to ensure that changes you'd expect to be applied via Javascript are in fact being applied.
* The "Net" tab is stupidly useful if you do any AJAX work. Gone are the days of putting a textarea into your page to dump the results of an AJAX request to see if it came through alright - you can just click the "XHR" tab, and see any AJAX requests, their return status, and even pull up the results of the request in another tab (right click an entry, open in a new tab). If you just want to view the response inline, expand the line item and click the "Response" tab header in the expanded body. Instant source.
* The Net tab is also useful for debugging site load times. It can help you identify resources that are slowing down the site, allowing you to optimize them or factor them out. I recently performed load time analysis on a new product we developed at work and was able to make recommendations that cut load times by about 40% based mostly on the data we got from Firebug.
There's plenty more, but those are three of the most unique, useful uses, in my opinion.
Chris Heald on April 5, 2007 4:32 AMHere's a few tips for WDE; I use this method all the time to tweak and touch up CSS layouts.
* Use the "Outline | Block level elements" button to outline all the DIV tags. On a site with modern layout, everything is DIV, so this is essential.
* Use the "Information | Display Id Class Details" button to show the names of all the block elements you just highlighted.
* Use "CSS | Edit CSS" to begin editing the CSS with these visual and textual cues and you'll be hacking out layout in no time.
Jeff Atwood on April 5, 2007 4:40 AMI've found IE's Developer Toolbar to be equal to, and in some ways superior to, WDE on Firefox. But nothing in IE-land can touch FireBug. It's da bomb.
Kevin Dente on April 5, 2007 4:50 AMI can't imagine my life without Firebug. It has changed the way I develop for the web so drastically, I would consider it the greatest addition to a developers toolkit since the compiler.
I recommend Firebug to everyone, and when they see me use it after describing it, they all become instant believers.
I guess I should go donate some money to the project too.
Ryan Smith on April 5, 2007 5:01 AMJae: Good guess, Nvu is based on Gecko, like Firefox family.
For people who use Firefox day-to-day, I'd also recommend keeping around multiple Firefox profiles. I use one profile for development that has these extensions and quite a few others, another for day-to-day browsing with my bookmarks preferred keybindings, plus a final "plain" one I use to make sure sites work with default settings. Firefox isn't flawless, but with With XUL extensions, Firefox has hit a sweet spot between extensibility and out-of-box usefulness.
AdamG on April 5, 2007 5:41 AMThe latest version of Internet Explore Developer Toolbar Has lot to offer Check out here http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038displaylang=en
My personal favourite are :
1. Colour Picker
2. Cache Related Tool
3. Real Time HTML control properties and css properties setting in a property grid.
4. Image Report
My sish list would be a real time javascript debugger and F1 help connected to MSDN.
I love Firebug!
nbirkes on April 5, 2007 11:34 AMI installed both the extensions installed for a long time and firebug is really amazing as it saves so much time in javascript debugging. The time I used to spend in debugging javascript errors in IE looks like a bad dream now. This extension is a must for web developers.
Vivek Chauhan on April 5, 2007 11:56 AMI use firebug. I will start using the Web developer extension, Thanks for the information.
But, day by day internet explorer 7 or Mozilla 2 both consumes more memory and also, the loading time of the window is slow.
This extensions work well together because they help you in different situations. For instance, you can use WDT to control cache and cookies, outline all elements on page, show rendered source etc. This features are really important, but I don't need them all the time.
On the other side Firebug has the tools that I do need all the time - interactive console, tool that shows me how styles are applied to specific elements, HTTP requests and responses and so on.
Firefox is a great development platform.
Ilija Studen on April 5, 2007 12:47 PMAnother very useful web debugging tool is Fiddler:
http://www.fiddlertool.com/fiddler/
Its essentially an HTTP proxy that lets you inspect traffic between your browser and a host site.
Stephan Morais on April 6, 2007 2:08 AMI at first thought it said "Firefox as an IED." That would have been interesting.
Ian Small on April 6, 2007 2:23 AMI cannot live without these extensions now... I generally use Firebug to find out about the document (JS console, DOM inspector, CSS listing etc)... and use the Web Developer toolbar for actions like removing the style sheet and passing the current page to the validators.
Personally I feel they work well together, and use one more than the other depending on I'm doing at the time.
However, the IE toolbar... sorry, I wasn't that impressed... it helped me understand where the rendering engine was going wrong a couple of times, but it still has a long way to go... like the browser.
:-P (sorry, couldn't resist).
Craig Francis on April 6, 2007 2:53 AMPossibility for IE7: IE7pro (http://www.ie7pro.com) in combination with FireBug Lite (http://userscripts.org/scripts/show/8291)
Tip for IE7 developer toolbar: when using "select element" be sure to have opened the DOM view. It prevents IE from crashing... :(
Mark Roeling on April 6, 2007 2:58 AMI specially like firebug for giving me the ability to debug javascript through a console environment. It's been extremely hard up until now to have something similar to flash's console where you can send trace statements as code is executing to see what's going on. Before, firebug, when I needed to debug something, i would add a javascript file to the page, it was my debug script that created an element on top of everything else, and a had a function called trace that would output what i sent to it to that element. It was rudamentery, but it worked. Now, with firebug, all I have to do is call the console.debug() or any of the other console functions. It's been really helpful and has lowered my debugging time on javascript projects.
Carlos Quijada on April 6, 2007 3:47 AMIf you must debug in IE, helpful tools are:
"Javascript Shell for IE" - a bookmarklet that gives you a command-line for executing Javascript, like Firebug
Microsoft Script Editor - Firebug-like IDE that pops up when a JavaScript error occurs. A good alternative when Firebug's debugger isn't working properly (e.g. when it gets the line numbers wrong). You can get MSE by downloading the MS Office trial (big download). If you don't want to do that, you can download the inferior, older, buggier Microsoft Script Debugger.
Jonathan Aquino on April 6, 2007 4:31 AMThere's a problem with the current version of Firebug and FF 2.0.0.3 that keeps Firebug from being able to display CSS in the right-hand pane. I've been using all the suggestions for enabling it, none of which seem to work for me. I'm sure it'll be fixed in due time, though.
Brook Monroe on April 6, 2007 5:04 AMNo one has mentioned Fiddler... It's a debugging proxy that gives details you only wish you had a way to get... Ever try to debug a blown AJAX call... See the content of the requested page along with other tidbits in fiddler... http://www.fiddlertool.com/fiddler/
GrandNagel on April 6, 2007 5:05 AMCorrection: finally got the fix to work. Remove FF, delete the "/Program Files/Mozilla Firefox" folder, and reinstall FF. Then add Firebug again, and it works.
Weird.
Brook Monroe on April 6, 2007 5:23 AMFirebug is one of the best reasons not to want to drop FF for IE, though I have to admit that the latest incarnation of the IE Developers Toolbar is a very nice piece of work. In combination with IE7Pro, IE almost works as nicely as FF ;)
Gabri on April 6, 2007 5:39 AMI apologize in advance, but "me too!". When trying to use IE or any IDE for twiddling with html/css, it's like being blindfolded/handcuffed/gagged. Nothing beats bringing the page up in the fox and tweaking the css/dom realtime to fix a rendering/javascript problem.
I'm not primarily a designer, but , but it far beats any of the other tools available to me (other than my brain). The only bad thing is it doesn't allow drag and drop modification in a WYSIWYG fashion, but that's probably not far away.
mike on April 6, 2007 6:06 AMYet another "me too" post, but I love both these tools.
Live HTTP Headers is also useful for checking whether content is cached, gzip-encoded, etc.:
https://addons.mozilla.org/firefox/3829/
Kalid on April 6, 2007 6:43 AMYou Forgot IE tab and IE tab lite. Develope Crossbrowser in realtime with the tools you love!
1066design on April 6, 2007 7:35 AMI can't say I use Firefox as an IDE - I've never really tried - but thanks to the bountiful plugins it is the most important tool in my development arsenal.
http://www.morningtoast.com/index.php/2006/08/why-i-use-firefox/
From a casual browsing standpoint, I really don't have much preference - both load web pages just fine. But when people ask I say FireFox because that's what I'm using for 95% of browsing because that's my primary browser I use for development (which is pretty much daily).
Brian on April 6, 2007 7:38 AMI would suggest http://www.debugbar.com and the highly experimental CompanionJS http://my-debugbar.com/wiki/CompanionJS/HomePage for a IE IDE ... but that's if you really want to work with IE!
EuGeNe on April 6, 2007 8:32 AMFirebug is also a great way to dig into sites that have a style, feature, or function that you'd like to understand. When I see a particularly shiny style, for example, pulling up Firebug and examining individual elements for what styles apply to them is a great way to get "how'd they do that?!" answers.
As for preferring IE7, I don't have that luxury. My Windows work is done exclusively at the work office, and they haven't even patched XP to SP2 yet, let alone approved IE7. Firefox has served me well across all three platforms I work in (Win, Linux, OS X), and with the addition of the Google Browser Sync extension[1], I've been able to move between them seamlessly.
[1]: http://www.google.com/tools/firefox/browsersync/
darren on April 6, 2007 8:32 AMI find myself reaching for LiveHTTP Headers all the time as well- http://livehttpheaders.mozdev.org/ . It's particularly valuable if you've got a cranky flash movie that's dropping half it's damn assets and you don't know whether the stoned flash freelancer linked them wrong or the drunken sysadmin misconfigured the mime types again...
Tim Howland on April 6, 2007 8:40 AMI love both tools, and use both tools. In addition, for ColdFusion Programmer's there is a firebug add-in, that will interact with the debugging info from coldfusion and display the debug info from with in FireBug.
It's called ColdFire at http://coldfire.riaforge.org/
I also highly recommend the Server Switcher Extension for Firefox, for example if you want to easily switch between your development, production, staging, etc servers...
You can install ServerSwitcher at https://addons.mozilla.org/en-US/firefox/addon/2409
What it allows to create aliases between different servers of yours, and puts an icon in the same spot that the rss icon shows up in the location bar, and let's you switch servers.
That's what I use for basics..with browsing/developing.
Part of my daily surfing regimen is Firefox's plug-in ability to switch a tab to Internet Explorer browsing mode. "Oh no!", I might say, "How am I to test this page in IE? I'll have to open Internet Explorer... WAIT!"
How very convenient.
Lots of other reasons that FireFox has a place close to my heart, many of them plugin-related.
Curtis on April 6, 2007 9:10 AMThanks for the article. I'll give it a shot, i've been using dreamweaver for a quite long time, and it's kinda slow you know ?.
Regards!
I agree that the IE Developer Toolbar compares to the WDE but, especially for IE7, it is buggy as hell. Mine crashes a lot and is really slow. Maybe there is an update I'm missing....
Supergibbs on April 6, 2007 9:23 AMI must confess that I often use Firefox with Firebug for debugging websites, though I generally don't want to touch the horror that is Firefox even with a stick. I'm looking forward to Opera 10, due out later this year, which will finally include native web developer functionality, the only thing missing. Yes, I know they have dev tools and there were bookmarklets and custom menus even before, but...
Anyway, for the general browsing experience, nothing can beat Opera. I just wish it was a little bit more developer-friendly (though even in that regard it blows away any other browser out-of-the-box, as with every other functionality, which usually appears copies in other browsers 2-5 years later).
Johnny Guitar on April 6, 2007 10:35 AMWow! I'm new to web development, and I've never heard these tools existed. I will definitely check them out. Thanks for the great post!
Axel Kreuzberg on April 6, 2007 10:38 AMWow that's really weird I just wrote about this yesterday:
http://www.codeandcoffee.com/2007/04/05/three-firefox-plugins-to-greatly-help-web-developers/
I have been very much in debt to two great extensions: Poster (http://www.milowski.com/software/poster/) and Live HTTP Headers (http://livehttpheaders.mozdev.org/). If you do much with SOAP and REST these two tools combine to form a mighty Voltron of debugging and testing.
Poster opens up as a sidebar and Live HTTP Headers gives you to ability to open in a tab changing Firefox into a HTTP debugging machine.
I can't agree more about the goodness of Firebug too. It's amazing. I only wish the third-party browser version of it worked as well as the Firefox native one (clicking on an object taking you to its info would be great).
Josh Peters on April 6, 2007 11:24 AMFirebug Rocks!!!
I have been using firebug since last 6 months. I can't imagine the web application development without it. Debugging Ajax application would have never been such fun. And yes, the javascript debugging,it's cool and powerful, this makes firefox a true IDE. Also,Javascript console, its just awesome!. Can't live without it. Regarding the Web Developer Extension, I had installed it few days ago, its powerful, but I haven't used it much.
The scrapbook plugin is also very useful. It's major functionality is collecting websnippets or entire webpages, but it also has note entries where you can enter any html, css,and script and get an instant rendering. It is a wonderful companion to firebug because it acts as a script/code library for firebug development. I also use the earea editor, which is a simple editor where you can copy/paste into and get relative path URL fixups. Using firebug on the earea document gives you a dyno webpage IDE combination. The earea editor is simply a blank webpage that turns on the native wysiwyg editing capabilites of your browser. There's no buttons for adding HTML elements, but you don't really need that with Firebug since it allows you to edit the HTML itself, and with Scrapbooks notes it's easy to grab templates for tables, embeds, etc.
The earea url is:
change the URI parameters to modify the default font style.
rickdog on April 6, 2007 11:38 AMI also use Aardvark http://karmatics.com/aardvark/
great stuff especially for reverse eng.
If you could combine this with the [Li|U]nix command line, so you could do some real web development, like Ruby on Rails, then you'd really have something.
-Rob
Robin on April 6, 2007 12:03 PMHow do you screenshot while keeping the shadow?
Brandon on April 6, 2007 12:05 PMAnyone claiming that IE's developer toolbar is remotely close to either of these is kidding themselves. I have tried the developer toolbar, but it is painfully lacking if you are trying to deal with moderately complex website layouts.
Nate on April 6, 2007 12:06 PMHow do you get that console to come up with the web developer extension?
Zach on April 6, 2007 12:20 PMKomodo, an actual IDE, is also based on the mozilla code. One advantage it has is the ability to debug both JavaScript (using same api's that Firebug uses) and the server side code (such as PHP) at the same time, along with a liveheaders style proxy. There's also a free (non-debugger) version.
shane on April 6, 2007 12:21 PMFirebug is useful, but be sure you install the very latest version (1.0.4), because a VERY SERIOUS vulnerability has been disclosed last night: http://www.gnucitizen.org/projects/firebug-goes-evil/
--
There's a browser safer than Firefox... http://noscript.net
(digg effect incoming, watch out) /pat Jeff's shoulder
F.O.R. on April 6, 2007 12:25 PManother feature of Firefox that i depend on for development work is the dump function: http://developer.mozilla.org/en/docs/DOM:window.dump
console logging is lightyears easier than alert debugging.
micah on April 6, 2007 12:44 PMI can't help but feel that "IDE" isn't quite the right term here. If it were truly integrated, you'd be able to actually edit and save the pages right there inside the web browser.
Don't get me wrong, I still think this is a great way to develop. I use this exact setup (along with Zend).
Steve on April 6, 2007 1:11 PM@Robin - [Li|U]nix is a lot more effort than *N*X.
And for those that wonder... "Why two asterisks?" The answer is simple:
liNuX
uNiX
Any questions? Of course, we're SUPPOSED to be typing: Unix|GNU/Linux... but, uh... yeah...
Jae on April 6, 2007 1:13 PMMyself and another developer I work with use Firefox with those developer plugins as well. I'd have to say for me, on OSX a lot, Safari is faster for sure. And I think IE as a whole is faster on Windows. But definitely, when it comes to finding some busted code, Firefox rules. Now if we could only get cool extensions like those for other browsers.
Bill Rowell on April 7, 2007 7:30 AMEven though Firefox has extensions like this, the error messages for JavaScript errors are still rather cryptic most of the time and it doesn't even spot everything. Opera's, on the other hand, are usually much more helpful. And nothing beats Opera in sheer JavaScript execution speed.
Jani on April 7, 2007 9:10 AMEven though Firefox has extensions like this, the error messages for JavaScript errors are still rather cryptic most of the time and it doesn't even spot everything. Opera's, on the other hand, are usually much more helpful.
1) I have had nothing but problems using firebug. It constantly crashes or just stops working. I have never had an issue debugging javascript in VS/IE7
2) The Web Developer Extension looks interesting and I'll definitely check it out the next time I'm debugging layout in Mozilla. The IE developer toolbar also rocks balls; however I don't believe you can edit HTML on the fly. Woudl be nice, tho.
3) Captcha:Orange. Always is, and always will be.
You also can try some bookmarklets(like a test styles) to improve the IDE.
kmmbvnr on April 8, 2007 10:34 AMI use these two extensions daily, and UrlParams ( https://addons.mozilla.org/en-US/firefox/addon/1290 ) whenever I'm doing serious debugging. It lets you watch and modify all the GET/POST parameters in a handy sidebar.
Thomas on April 9, 2007 2:32 AMIs it still usefull for a non web developer (including me)?
I've used Firebug some but now that I've used Eclipse and Java utilizing GWT (Google's Web development toolkit), I'm not sure I'd want to go back to debugging native Javascript. I'm curious whether you've come across similar conclusions. I just completed an eval of GWT (in relation to a prototype I just completed). Eclipse as an IDE is very feature rich and its free (as is GWT). So debugging in Java seems like an easier and more structured effort. Any thoughts?
darrell king on April 9, 2007 3:45 AMJeff,
another add-on that you should check out is the HTML Validator extension by Marc Gueury.
https://addons.mozilla.org/en-US/firefox/addon/249
Much easier than using the online w3c validator, or even setting up your own instance locally (which I have done in the past) - since it validates source between postbacks/etc. which is often tedious to do when you need to view source/cut/paste into the online validator and then check. The latest version uses the OpenSP lib's that the w3c validator implements so the error checking is very much inline. Otherwise it can use the HTML tidy lib's for its checking.
Was more than happy to kick a few euro's Marc's way for all his hard work.
Peter Mescalchin on April 10, 2007 5:16 AMYou do realize that you can edit CSS and properties etc directly in FireBug and probably drop the WDE...??
And you'd obviously use http://ajaxwidgets.com as your Ajax Widgets library I assume... ;)
.t
Thomas Hansen on April 10, 2007 12:47 PMBe sure to read http://www.bram.us/2006/12/11/my-foxification-pimp-your-firefox-to-be-a-web-all-star/ too ;)
Bramus! on April 11, 2007 4:49 AMFirebug is the daddy! I have no idea how I coped without out it. It's a dream for debugging CSS
Rob on April 18, 2007 4:40 AMYou almost forgot IE tab. When plugged into IE 6 with visual studio installed, it even allows you to do the necessary IE debugging! Great Article!
slajax on April 18, 2007 7:23 AMI'm thirding the call about fiddler. I'm not an IE fan (i just drank some APPLE juice) but I'm still waiting for a firefox extension that does what fiddler does. Grab the fiddler 2.0 beta, it does full https real time request inspection!
joe on April 21, 2007 7:48 AMOpera wins at speed and standards compilance, sorry guys!
Yuzle! on April 22, 2007 4:36 AMKewl! thanks for the informations... Now I can easily edit my sites.
tinysigns here!
tiny on April 22, 2007 9:12 AMviva firefox!
luc on May 9, 2007 5:31 AMI've found IE's Developer Toolbar to be equal to, and in some ways superior to, WDE on Firefox. But nothing in IE-land can touch FireBug. It's da bomb.
eviri on July 12, 2007 12:22 PMAlso definitely look into Aptana for all your Web dev IDE needs, they've got HTML/CSS/JavaScript pretty much down to a science (there are a few minor kinks to work out...) are killing it with Ruby/Rails thanks to the acquisition of RadRails, and have just recently begun integrating PHP functionality.
The JS debugger for Aptana is quite good (VS/traditional IDE style, not in-browser) and in the upcoming Studio version (commercial license) works perfectly in IE as well. (testing identically across environments is sick!)
And of course since it's an Eclipse product, many many plugins become available to you once you've installed it. (XMLBuddy, Wicked Shell and Subclipse are the only non-Aptana-owned plugs I use somewhat regularly)
Nick Carter on October 25, 2007 12:21 PM@joe
Opera wins at speed and standards compilance, sorry guys!
It's true, i love opera for browsing mailing rssing and every ing i can,
but for developing nothing better than firefox
joanthan on February 5, 2008 11:41 AMwhat's wrong with you guys? IE??? are you kidding????
Serious web developers go Firefox/Safari, at least....
IE....hahahahaha
can any one plz tell me how can i outline div(not all the blocked element) like in IE developer tool bar.
if any one know plz mail me at
ahtes_ham@yahoo.com
can any one please tell me i wanted to close the window without javascript in eclipse . i don't want to use javascript. i wanted to do that with coding . but i am not able to do that . i am stuck here , i am not able to get the soln. plz help me out. i am able to do the in IE6/7 and opera but don't have soln for Firefox2.0/3.0.
I want solution for firefox 2.0 and 3.0.
I am using eclipse. please mail me krunpatel@hotmail.com
I'm really very useful to follow a long-time see this as a blog here Thank you for your valuable information.
Oyun on June 14, 2009 7:13 AMI use some of the Firefox developer tools including Firebug and the Webdeveloper toolbar. I can't imagine how I managed without them. Thanks to the people who wrote them.
oldgraham on August 5, 2009 2:53 AMEven though the shop I develop at is solely IE, I made the switch to Firefox a few years ago for my browsing and debugging. I still develop my web apps in IE, but if I get a javascript bug I open it in Firefox. As anyone who develops web apps knows, IE's javascript debugging is useless.
Firefox beats IE7 hands down for browsing, just based on the usefulness of Adblock Plus.
Also take a look at this JavaScript Shell http://www.squarefree.com/shell/
a nice addition to the toolbox
Some have asked what Web Developer Toolbar is good for when firebug is so awesome - here are a couple things I really like about it:
When you use JavaScript to "dynamically" generate markup and insert it into your code, you can use the "View Source...View Generated Source" option (which is also available via right-click context menu) and see what the code looks like that you generated.
It really helps when you're trying to figure out what "that stupid div won't align when I insert it".
Another favorite is what I call the "CSS Disabler". When there are multiple stylesheets, like if you're using the YUI reset-fonts-grids.css and doing a bunch of re-styling, you can individually disable whole stylesheets, all of the page's css, inline styles only, etc. It's really great when you're working on complicated CSS-based layouts.
Jon on February 6, 2010 10:03 PMWe've come all this way and nobody's mentioned Watir? Seriously?
Watir's a harness program that can listen to/send OLE commands to IE (FireWatir lets you do it with Firefox, but I haven't tried to use it yet) and more than any of the other tools (Fiddler/FireBug/Web Developer), Watir's the one that's made may day-to-day job a lot nicer. Gone are tedious steps to reproduce a bug in the web app and the back-and-forth with QA to get a clean reproduction, replaced with a Watir script so that I can drive my app and see what goes wrong where. So very, very nice.
I know you have posted everything seemingly from Windows, so this may not be the proper place to post this, but I will anyways...
I use coda to dev websites (front and back ends) and I love firefox (mainly because of the inspect dom and highlighting of elements, and the realtime css changes you can make.
My Point: I get the feeling a good Mac App developer could create a similarly operating application for building the html/css of a site, building it real time, with the ability to save it as you are making changes. Basically building a page in firefox but having it save to your filesystem with a few UI modifications.
Misterparker on August 24, 2011 1:10 PMThe comments to this entry are closed.
Subscribe in a reader
Subscribe via email
|
|
Traffic Stats |