15 Helpful In-Browser Web Development Tools

Advertisement

There are many useful Web development tools that integrate in your browser. These in-browser tools are commonly known as add-ons or extensions. Though add-ons and extensions aren’t just for Web development, many of them out there are designed specifically for Web developers. In-browser tools vary greatly in the jobs they perform; for example, some of them help you diagnose issues with CSS, HTML and JavaScript, while others evaluate the accessibility of your website.

In this article, we explore some of the most popular and useful in-browser Web development tools. You’ll find tools for popular Web browsers like Firefox and Internet Explorer. Whether you need to debug and inspect your HTML, inspect HTTP headers, access FTP source files, evaluate accessibility or just figure out what color a Web page element is, you may find a variety of tools discussed here useful.

Firebug

Firebug - screen shot.

Firebug is an extension for the Mozilla Firefox browser that allows you to debug and inspect HTML, CSS, the Document Object Model (DOM) and JavaScript. Though it has many strong features, it’s most known for revolutionizing the way developers debug and profile JavaScript code.

For example, before Firebug, many developers would use the alert() function to see what a variable contains or to find what line the code breaks. With Firebug enabled, you’re told specifically what the error is and which line it comes from. Firebug is an excellent tool for AJAX application developers because it lets you explore and perform on-the-fly edits on the DOM to see what happens when you manipulate Web page elements after a user action.

Aside from its popular JavaScript and DOM functionalities, Firebug can also log network activity to allow you to see detailed results of HTTP connections, inspect and edit HTML on the fly and debug and visualize your CSS.

Further Reading

Web Developer

Web Developer - screen shot.

The Web Developer extension (for the Firefox, Flock and SeaMonkey Web browsers) is an add-on that adds a tool bar with a menu of options for debugging and inspecting Web pages. It has a ton of features, my favorite being the View CSS Information option (CSS >> View Style Information, or Control + Shift + Y on Windows) which makes a page element clickable and shows you CSS selectors that affect that particular page element. It’s helpful for exploring and understanding large CSS files and projects that you’re unfamiliar with (such as a new open-source content management system).

It has built-in options for syntax validation for popular Web services, such as W3C’s CSS Validator and HiSoftware’s Web Content Accessibility Report, for your convenience. It has many other useful features, such as disable options for CSS, JavaScript and images, to test for degradation and progressive enhancement; a Forms menu with options for working with Web forms; Display Div Order and Display Block Size options to help you visualize the layout; and so much more.

YSlow

YSlow - screen shot.

YSlow is a Firefox extension created by Yahoo! developers that integrates with Firebug (therefore you need to have Firebug enabled for it to work). YSlow analyzes a Web page for front-end performance and, in its simplest usage, gives you a letter grade (A being the best and F being the poorest) for each of the best practices for speeding up  your website.

YSlow also allows you to inspect in detail things that are essential for a high-performance website. For example, the Stats view gives you the total size of a Web page and a summary of items that are loaded when the Web page is requested (i.e. style sheets, JavaScript files, Flash objects and images), so that you can hunt down the bottlenecks that cause a Web page to load slowly.

The Components view outlines every single component of a Web page in tabular format and allows you to inspect it to see attributes such as size, expiration date (for cached files), whether it uses server-side compression (Gzip) and response time (how long the component took to load).

Further Reading

Internet Explorer Web Developer Toolbar

Internet Explorer Web Developer Toolbar - screen shot.

If you need similar functionality to that of Firebug and Web Developer for Firefox, but want to debug, inspect and tune your Web pages and applications on the Internet Explorer browser, check out the Internet Explorer Web Developer Toolbar. The IE Web Developer Toolbar, when enabled, opens a toggle-able pane located at the bottom of the Web browser, giving you access to many helpful options for exploring Web page components.

For example, you can experiment to see how page elements work by editing the Web page’s DOM and HTML directly in the browser, allowing you to quickly change and edit DOM elements to see what happens when you perform certain actions or modify certain parts of the code. You can also debug, test and inspect JavaScript with the IE Web Developer Toolbar, giving you options for setting breakpoints, seeing the call stack and exploring variable attributes.

It has a ton of other helpful features, such as selectively disabling IE settings (to see how your Web pages degrade in IE); the ability to view the HTML and CSS source of any Web page with syntax-highlighting; and an in-browser ruler to help you measure things on a Web page.

Further Reading

Fiddler Web Debugger

Fiddler Web Debugger - screen shot.

Fiddler is an Internet Explorer extension that analyzes and profiles a Web page’s HTTP traffic. If you’ve ever wanted to know exactly what happens when a client requests a Web page, Fiddler is the tool that’ll help you do the job. The HTTP Statistics view exposes all components and files required to generate a particular page, giving you details such as the total number of HTTP requests, total page weight, HTTP response headers and cache expiration.

Fiddler permits you to set up breakpoints, allowing you to step through and edit HTTP traffic (to see how it would affect your Web page), a useful feature for analyzing AJAX-based interaction and potential security flaws in a Web application. Perhaps what makes Fiddler so powerful is its extensibility, allowing you to create your own scripts (or import other developers’ scripts) to perform certain tasks or make interface modifications to the extension itself.

Further Reading

DebugBar

DebugBar - screen shot.

DebugBar is a debugging in-browser extension for the Internet Explorer browser. It has many helpful features, such as the ability to send a Web page screenshot via email, a color picker, the ability to view both the original and interpreted code (i.e. if you use JavaScript to manipulate the styles of a DOM object, then you can see the interpreted HTML source code of that manipulation) and a Console API (after installing Companion.JS) to help you gain information through a command-line interface about particular components of a Web page.

DebugBar is free for personal and educational use, but you are required to buy a license if you use it for commercial purposes.

HttpWatch

HttpWatch - screen shot.

HttpWatch is another HTTP traffic viewer and debugger for Firefox and Internet Explorer that is similar to Fiddler. It has many unique features and a more intuitive, less intimidating interface than Fiddler. Some notable features are the ability to generate request-level time charts (useful for documentation and presentation purposes); decryption of HTTPS traffic to help you debug, inspect and tweak your secure SSL-based connections; and the ability to export captured data to XML and CSV formats for importing into spreadsheet applications such as Microsoft Excel or Google Spreadsheets.

HTTPWatch has a Basic edition, which is free, and a Professional edition, which has more options. Check out the comparison table between the two editions to see the exact differences.

Live HTTP Headers

LiveHTTPHeaders - screen shot,

Live HTTP Headers is a Firefox extension that allows you to inspect HTTP request and response headers. Exploring HTTP headers allows you to debug Web applications, glean some information about the website’s server and inspect cookies sent to the client requesting the page.

For example, the Server response header gives you a website’s HTTP server type (Apache, IIS, nginx, etc.), the HTTP server version and the operating system (though server administrators can remove or limit the information you see for security purposes).

Web Accessibility Toolbar

Web Accessibility Toolbar - screen shot.

The Web Accessibility Toolbar is a freeware extension for Internet Explorer and Opera that gives you a slew of options for quickly evaluating and analyzing your Web content’s accessibility. It has validation options for submitting your URL to content accessibility web services such as Juicy Studio tools, a grayscale converter to simulate the user experience of individuals with color-blindness and poor eyesight, and a search function for particular page structures (e.g. finding list objects and unordered lists).

Other useful tools released by Vision Australia are the Colour Contrast Analyser, which analyzes the contrast of foreground and background colors for readability, and the Complex Table Mark-Up (or Com Tab) Toolbar, which can help you understand (and construct) complex tables that are usable by non-traditional Web browsers (such as screen readers).

Further Reading

Fangs

Fangs - screen shot.

Fangs is an in-browser tool for Firefox that emulates what a screen reader “sees” when visiting a Web page. Its function is simple: to output a transcript of what a screen reader will read out to a user when a Web page is visited. It’s a helpful tool for quickly analyzing if you’ve structured your content effectively so that it’s understandable and usable by vision-impaired individuals, without forcing you to learn to use (and purchase) a screen-reader application such as JAWS or Windows Eyes.

Further Reading

Venkman JavaScript Debugger

Venkman JavaScript Debugger - screen shot

Venkman is the codename for Mozilla’s very own JavaScript debugging environment. It is available as an add-on that can be used to extend browsers such as Firefox, Netscape, and SeaMonkey. It is a robust environment for doing complex JavaScript debugging and troubleshooting. The Console view gives you a command-line interface for interacting with the debugger. It has an excellent Stack view feature that allows you to step through active functions when it reaches breakpoints.

Further Reading

ColorZilla

ColorZilla - screen shot.

ColorZilla is an incredibly simple — but very useful — extension for Firefox. If you’ve ever wanted to determine what colors are used on a Web page, ColorZilla is the tool for the job. It adds an eyedropper icon to the bottom-left corner of Firefox.

Clicking on the eyedropper icon makes objects on the Web page clickable, and upon clicking a particular section of a Web page, it outputs the hexadecimal, RGB and hue/saturation values of that area . Before ColorZilla, you might have pasted a screen capture of a Web page into a graphics editor like Photoshop and then used the eyedropper tool in the editor to sample colors. ColorZilla saves you time and streamlines color-sampling processes.

FireShot

FireShot - screen shot.

FireShot is an in-browser tool for Firefox and Internet Explorer that allows you to take screenshots and then annotate, edit, organize and export them. Screen-grabbing is a common activity for Web developers to document previews of Web application prototypes and share them with clients, and FireShot gives you a feature-packed in-browser option to manage and streamline your screenshot needs.

Web Inspector

Web Inspector - screen shot.

Web Inspector is part of the Webkit open-source browser engine project. It’s an ultra-sleek tool for inspecting the DOM hierarchy in a separate, compact HUD-style window. You can easily search the DOM, explore the DOM tree (hierarchy) and have a useful interface for isolating DOM sub-trees and nodes so that you can focus on particular sections of a Web page. The Web Inspector also provides you with a Style pane to explore CSS rules applied to particular page elements.

FireFTP

FireFTP - screen shot.

FireFTP is a free, cross-platform Firefox extension for FTP’ing files. It offers several advantages to stand-alone FTP applications, such as its operating system-independent requirements. What’s exceptional about FireFTP is that even though it is an in-browser (and free!) application, it has all the features you would expect from a standalone FTP application, such as support for secure (SSL, TLS, SFTP) protocols, a synchronization feature to sync up local and remote files, and directory comparison to help you see what files are missing or different between two directories and much more.

What’s your favorite in-browser tool?

There is an overwhelming amount of in-browser tools for Web development out there. Some are specific to particular Web technologies and set-ups (such as FirePHP for PHP developers, SQLite Manager for developers using SQLite databases, and Opera Dragonfly for developers who prefer using the Opera browser). If your favorite tool isn’t on the list, let us know in the comments section why it’s your favorite and why we should check it out.

(al)

↑ Back to top

Jacob Gube is the Founder and Chief Editor of Six Revisions, a web publication for web developers and designers, and the Deputy Editor of Design Instruct, a web magazine for designers and digital artists. He has over seven years of experience as professional web developer and web designer and has written a book on JavaScript.

  1. 1

    Very useful tools.

    I always use FireBug and Web Developer.

    -1
  2. 2

    FireBug has helped me on many projects to crease out the bugs!

    1
  3. 3

    The Safari (WebKit) Web Inspector is much different than the link in the article provides. A more recent overview can be seen at Yet another one more thing… a new Web Inspector!

    It keeps getting better and is beginning to approach Firebug usability. The most recent build has the Inspect Element contextual menu item missing which reduces it’s convenience greatly. You can still invoke it from the menus when you enable the debug menu. I hope it returns soon.

    0
  4. 4

    Safari’s Web Inspector has been redesigned, the mentioned feature set and screenshot taken are way too old. Take a look at this blog post by Dave Hyatt: Web Inspector Redesign.

    1
  5. 5

    Great list!

    I have to look at a lot of websites in other languages so I use the Translator add-on for Firefox. Really handy to translate the whole page in one click.

    0
    • 6

      Great option!

      I didn’t know it existed, but I will use it now. Thanks!

      0
    • 7

      Great option!

      I didn’t know it existed, but I will use it now. Thanks!

      I think everyone agrees that Firebug is a great time saver. I also like SenSEO, to see how my site works in search engines.

      0
  6. 8

    FireBug has saved my life countless times…..it has even saved my marriage.

    Who-da-thunk-it!

    0
  7. 9

    I use Charles (http://www.charlesproxy.com/) over fiddler, its a lot better!

    0
  8. 10

    Fiddler is not an IE extension, it is a stand-alone application.

    0
  9. 11

    FIREBUG! I love you.

    0
  10. 12

    I cant exist without Firebug!

    0
  11. 13

    Nice reviews, although I still use Photoshop for grabbing color codes, part of my habit :)

    0
  12. 14

    Another one who can’t live without Firebug. I’ll give a try on the other ones.

    0
  13. 15

    Check out Aardvark for Firefox :-)

    0
  14. 16

    Great post, as usual!

    Did not notice the RSS icon… awesome!

    0
  15. 17

    webdeveloper toolbar for color info

    0
  16. 18

    Forget FireBug. It’s really only great for JS debugging or hacking sites that use hidden inputs or JS to validate forms.

    Web Developer is the best FF addon ever created. All I’ll say is hot keys. Check them out.

    0
  17. 19

    FireBug is the best tool out there! It has saved me who knows how many times!

    0
  18. 20

    measureIT is quite usefull tool too.

    0
  19. 21

    Wow… pretty shweet!

    0
  20. 22

    too bad fireshot not avaliable for linux, i’m using abduction to take screenshot
    use aardvark to view site layout

    0
  21. 23

    Another great tool is HTML Validator / HTML Tidy which is available for FireFox.

    I find it must more convenient than the validator built in to Web Developer.

    0
  22. 24

    While not my favorite one tool I think deserves to be on this list is pencil.

    0
  23. 25

    Firebug is definitely my favourite. It might’ve also been worth mentioning that Opera now has Dragonfly which offers similar functionality to Firebug and Webkit’s Inspector.

    0
  24. 26

    FireFox – WASP

    0
  25. 27

    Web Developers, FireBug/FirePHP and Colorzilla are my favorites, but I’m going to install a couple of this great list. Thanks for sharing!

    0
  26. 28

    Am allready using FireFTP , FireBug and the Web Developer toolbar and I have to agree they are awesome to say the least ^^

    0
  27. 29

    I like Westciv’s bookmarklets XRAY and MRI. You don’t have to install anything. Just have an Internet connection.

    0
  28. 30

    i really love firebug! since i’ve known it, i never let it go :)

    0
  29. 31

    Another useful accessibility plugin is the WAVE Toolbar, which provides similar functionality to WAVE’s online web accessibility checking service, but can be used on your own machine.

    http://wave.webaim.org/toolbar

    0
  30. 32

    Great post.

    I am already using Fire bug, Web developer, fire shot & Internet Explorer Web Developer Toolbar. Thanks for providing information about other Internet explorer related development tools.

    I just installed Debug Bar for IE. Its good 1.

    0
  31. 33

    really nice list :D

    0
  32. 34

    Opera DragonFly, it’s alpha software, but it deserves a mention.

    0
  33. 35

    +1 for measureIt. Very useful when getting your layout right.

    0
  34. 36

    Where’s DragonFly?

    0
  35. 37

    firebug, web developer and fireftp…ive always used them…now im gonna fangs…will help me restructuring my site…thanks

    0
  36. 38

    HackBar is a great way to manipulate complicated URLs interactively. Modify Headers, while imperfect, has been handy to access name based virtual servers, but you do not have the required DNS records in place to access the server by name.

    0
  37. 39

    A fantastic image optimizer is smush.it! (http://www.smushit.com/) which is developed by developers at Yahoo. It does as advertized and goes beyond images optimized in Photoshop. To run this tool, you will need to install Firebug first (as smush.it! is a firebug extension).
    The amount of memory shaved off of images varies, but for those who want to squeeze the most out of an image file size, the savings can add up. Sites with heavy traffic can benefit from having images site-wide reduced in file size without any image quality compromises.

    0
  38. 40

    My mistake… smush.it! is not a firebug extension. It is simply a Firefox add-on.

    0
  39. 41

    I’d easily marry Firebug! FireFTP is also an awesome addon.

    Christian

    0
  40. 42

    Interesting to know that extensions were available for IE now. I use Web developer, FireFTP, ColorZilla & ScreenGrab for Firefox on Linux.

    Fireshot is good but is available for Windows only.

    0
  41. 43

    I also use firebug/YSlow, webdeveloper, colorzilla, & measureIT. But there is also Screengrab!. It allows you to copy selections, viewport, or full pages and paste into photoshop. no saving to the desktop and dragging to PS. I hate creativity droppings on my desktop.

    0
  42. 44

    Firebug is Best

    0
  43. 45

    i love firebug! without this little plugin i would often get MAD!
    web developer bar is the perfect combination for firebug!

    0
  44. 46

    Plugins like fireFTP are really good, I hate installing standalone programs for every tit bit.

    Firefox is a real swiss army knife.

    0
  45. 47

    Hi!!

    I love firebug and webdevoloper, I think I can’t live without those plugins

    0
  46. 48

    very useful! thank you

    0
  47. 49

    horray Webdeveloper! firefox has more addons than IE

    0
  48. 50

    very useful article – thx a lot!

    I always use firebug, it is very useful and handy :)

    0
  49. 51

    Colorzilla, can’t live without it :-)
    Second best would be Measure-it! :-)

    0
  50. 52

    Константин

    November 19, 2008 12:50 am

    «tails export» for microformats

    0
  51. 53

    Awesome list. Thanks guys :)

    0
  52. 54

    Scrapbook is also an amazing extension to capture html pages (better than “save a”s)

    0
  53. 55

    Firebug is without a doubt the most used developer tool that I have installed. I would sacrifice my text editor of choice (with syntax highlighting and tabs etc) for notepad just to use Firebug. Web developer is then second for me as its provides a large range of options. Also Show IP is useful for me as it allows me quickly see what server I am working on when on a development or staging server.

    0
  54. 56

    Dummy Lipsum is a very handy little Firefox extension. It does just one thing, but the one thing it does is extremely handy if you’re developing an application with a lot of forms. It simply allows you to right click on a text accepting element (a textarea, line input control, etc) and populate it with Lorem Ipsum text. When you’re testing a web app and need to repeatedly fill in the same form over and over again I can’t tell you just how much time this little plugin saves!

    0
  55. 57

    Cool nice! I use Firebug and Web Developer also. :)

    JHAY

    0
  56. 58

    my favorite tools in G Chrome browser , reaaaally cool things only for debugging but not a good browser.

    0
  57. 59

    I like the fire bug!

    0
  58. 60

    Don’t forget about the XRAY Bookmarklet… it’s fairly limited, but a good option for debugging IE6.

    Tyler

    0
  59. 61

    Erm, the url you posted to webkit is from 2006… Its 2008 now. thats a 2 years old article…

    I suggest you link to this post instead: http://webkit.org/blog/197/web-inspector-redesign/

    0
  60. 62

    You forgot Dust-Me Selectors, IE Tab and Mozilla Accessibility Extension. But my favourite has to be Firebug. I can’t even remember what it was like before Firebug.

    0
  61. 63

    Definitely Firebug.

    0
  62. 64

    I also use HTML tidy, which has a plugin for Firefox. It provides you with a simple view of validation errors and also gives a more detailed view of the exact problem on each line. There are other tools that do the same things, but I just find it really useful: http://users.skynet.be/mgueury/mozilla/

    0
  63. 65

    Tamper Data is a little bit more powerful than Live HTTP Headers.

    0
  64. 66

    Is there anything out there where you can edit the CSS of a website in IE7 and IE6? Just like you can with the web developer extension in Firefox??

    0
  65. 67

    I would definitely say FIREBUG!
    I am sure it has saved me 500h+ of developing time!

    0
  66. 68

    very handy for every webdeveloper: the w3c validator plugin for firefox!

    0
  67. 69

    Firebug, FireFTP are essential to how I work. I used to use Web Developer Toolbar a lot, but that’s changed since Firefox 3 went and broke the keyboard shortcuts :-(

    0
  68. 70

    Another mention should go to ScreenGrab. I frankly cannot live without it. Invaluable for sending whole page screen shots of a site that is being designed/developed.

    Not a truly web developer based plugin – I found using Pencil to be very useful for mocking up forms and dialogs. At the very least you don’t need any image manipulation apps – just Firefox.

    0
  69. 71

    FireFTP, ColorZilla, MeasureIt, Firebug, Webdeveloper extension

    I code websites just using Firefox and Notepad++, all freeware and a lot handier than all those heavy, expensive wysiwyg web-editors

    0
  70. 72

    FireBug and Web Developer and screengrab (good for making fast screenshot) and iMacro

    0
  71. 73

    I use Web Developer :D
    Great list by the way ;)

    0
  72. 74

    I like httpfox. It is similiar to httpwatch but it is a free addon for FireFox.

    0
  73. 75

    Xray is indispensable:
    http://www.westciv.com/xray/

    It’s a bookmarklet that, when activated, describes any element you click on. Awesome!

    0
  74. 76

    Web developer, any day

    0
  75. 77

    My favorite is firebux :X

    0
  76. 78

    Man, seriously, enable the function to make small posts in RSS

    0
  77. 79

    Good list, the few firefox addons that I’d add that weren’t included in the list are:
    Selenium
    Pencil
    HTML Tidy
    Obtrusive javascript checker
    Measureit

    0
  78. 80

    Installed FireShot and ColorZilla after reading this article, thanks!!!

    0
  79. 81

    Nice article,

    Tamper Data for Firefox and TamperIE for Internet Explorer.

    0
  80. 82

    Been well into firebug for a while… recently got into using FirePHP. Its awesome for php developers, especially php developers wanting to debug their ajax (or ajajson) applications.

    0
  81. 83

    Three words: “Colour Contrast Analyser

    Not sure if this has been mentioned yet but, if everyone used this when choosing their colour schemes the web would be a better place.

    The tool allows me to check and compare foreground and background colour contrast inline with checkpoint 1.1 of the WCAG v1.0.

    If someone was to integrate this into a nice, easy to use, Firefox Add-on it would be awesome!

    0
  82. 84

    You can easily add pixel perfect to firebug :

    “Pixel Perfect is a firefox firebug extension that allows web developers to easily overlay a web composition over top of the developed html. Switching the composition on and off allows the developer to see how many pixels they are off while in development.”

    0
  83. 85

    These are great, I thought I knew about all the good ones but apparently not. Like debug mode in Safari/Webkit, there’s also a lot of other great tools that come on every Mac that I take advantage of. I didn’t know Webkit had a debug mode that was different than Safari, I’ll be checking that out this morning.

    0
  84. 86

    Nice list, thanks for sharing.
    I would add URLParams

    0
  85. 87

    Thank you very much for this!

    0
  86. 88

    Firebug allows me to edit the CSS and HTLM and see the changes instantly.

    Can Web developer do that? I have not seen the ability to edit the CSS directly in browser with Web Developer or IE Developer.

    IF anyone knows how please tell me. Thanks!

    0
  87. 89

    I use Firebug, web developer toolbar, fiddler, liveHttp headers, fireFTP. I would try to use other tools mentioned in here as well.

    0
  88. 90

    If you are familiar with Firebug and love its features then the IE Developer Toolbar is a big let-down. You can’t manipulate the DOM or HTML, it does not improve error messages (wish it did!) and it doesn’t give you load times.

    Firebug is much, much better. IE is a slacker…

    0
  89. 91

    @Justin Web Developer lets you edit CSS and HTML on the fly as well. Load the toolbar and the options will be included in the CSS drop down and the MISC dropdown. CTRL + Shift + E for the CSS

    I used alot of the plugins mentioned but can’t live without Web Developer or FireFTP. Also along with FireShot, ScreenGrab! is a must have.

    Great list!

    0
  90. 92

    I use WebDeveloper, Firebug and Colour Contrast Analyzer

    0
  91. 93

    I’d like to add CSSViewer, HttpFox and Screen grab! to the list.

    CSSViewer: Activate it with a button, hover over your website and get the resulting CSS for the specific element in a layover. Great, because it is fast (at least faster than activating Firebug/WebDeveloper)!

    HttpFox: Fiddler in Firefox

    Screen grab!: Another great screenshot tool for a quick shot…

    0
  92. 94

    This is a great post, and I either have used most of these or currently use them. My set up right now is: Web Developer, Firebug, Colorzilla. They are all amazingly useful, However i am still missing one part that I would like to find, Is there any way to fully integrate the web development into the browser: I.E.: edit and upload all from Firefox, so i can minimize the alt + tabbing? I will implement the FireFTP for the upload part, but is there a solution similar to firebug that will allow me to edit the files from Firefox as well?

    0
  93. 95

    IE Web Developer Toolbar is a little hokey compared to firebug. Firebug Lite can be be used to view page elements in a more “Firebuggy” style. Its basically a javascript include that you drop into your page. Not the greatest solution but definitely better. Or you could just forgot about IE altogether :)

    0
  94. 96

    Great list. I’m already using most of these tools, and will definitely try out the others here. Firebug,Web Developer, Yslow, and Fire FTP have changed the way work dramatically

    0
  95. 97

    Great list! With all the lists out there this one stood out for me and actually introduced me to something new and useful to my set-up.

    Thanks!
    db

    0
  96. 98

    Very cool post. Thanks for the info.

    I’ve been using Blackbird. It’s a neat javascript widget you can include on your page to send console messages to during development and it works on most browsers.

    Thanks!

    0
  97. 99

    excellent collection. I use FireBug, but didn’t know about YSlow. Will definitely be give it a try. Dugg.

    0
  98. 100

    @Gabe Diaz – Thanks Gabe. I just started playing around, but I find it is not as easy to use as firebug. I could not select the individual cell with the inspector and then edit the css in the same window. It’s in two seperate windows. I would have to search for the tag and edit.

    Firebug rules all. I just wish IE Developer would allow me to edit the CSS to help my browser testing. God how can they suck so hard when there are so many good examples of how to do things.

    ahah…

    0
  99. 101

    My favourite development tools for firefox are:
    ColorZilla
    CSSViewer
    HTML Validator
    IE Tab
    MeasureIt
    Screengrab
    and finally Web Developer Toolbar

    0
  100. 102

    I think Opera Dragonfly should be listed at the top of this list. It’s much more better than Firebug.

    0
  101. 103

    Brendon Kozlowski

    November 19, 2008 8:29 am

    Many of you are using multiple tools that are capable of doing the same thing. The Web Developer Toolbar has a ruler that gives measurements (you can drag+drop, and resize to the specified places to determine everything MeasureIt does)…someone said that either WebDev toolbar or Firebug has a color picker (haven’t seen it, doesn’t mean it’s not there). One thing to keep in mind is that the more extensions you have, the higher possibility exists for Firefox to use up additional memory – and if you are still using v2, the more prone it is to memory leaks. Know what you have and make sure to use it well. Obviously if some tools are similar but not exact you may want them both, but at least be completely aware of it. Regardless…good list!

    1
  102. 104

    Selenium IDE for Firefox is good for testing.

    0
  103. 105

    I use YSlow, ColorZilla, FireBug.. but my favorite tool is the Web Developper Toolbar !

    0
  104. 106

    Web Developer Toolbar is very cool..thanks for this collection

    0
  105. 107

    Curt Simon Harlinghausen

    November 19, 2008 10:07 am

    Firebug is just genius.

    0
  106. 108

    Love Web Developer, Colorzilla, FireBug, et al., but may I suggest the Codetch extension (http://www.codetch.com/)? It adds a code editor to Firefox under a tab or as a float. Doesn’t replace your IDE but has lots of features and comes in right handy. You can now live your entire working life inside Firefox :-)

    0
  107. 109

    Developing websites is no easy task at the best of times. I realized how much you actually learn over the years when my friend was given the task of creating a website. All the small tricks and, dare I say it, hacks that I have picked up and have become accustomed to seem like mountainous tasks to him, being so fresh in web design.

    My point being, we need things which make our lives a tad easier, and cut to dev time down as much as possible. This is where Firefox comes in and rocks our world.

    0
  108. 110

    Also there is HTTPAnalyzer, could be used as IE plugin or standalone, very helpful.

    0
  109. 111

    It’s Firebug first, and everything else takes a distant second.

    1
  110. 112

    Really, I can’t remember the way I worked before using Firebug…

    0
  111. 113

    Firebug is always in my list. XD

    0
  112. 114

    I like the firefox extension Textcomplete. Especially when you need to write something in a browser window, like Expression Engine. You can define any shortcut to anything. As an example, you can predefine “h” as “hello world”, then when you need to write “hello world”, just write “h” and press ctrl+alt+m. that’s all

    0
  113. 115

    Awesome list, thanks!! Firebug all the way

    0
  114. 116

    The Template Blog

    November 19, 2008 4:45 pm

    The one that have been using a lot lately is Screengrab, a FF extension that allows you to produce full web browser screen shots. May times it is useful to take screen shots of what is below the fold.

    The other biggies are Web Developer and Firebug.

    Dave

    0
  115. 117

    You don’t need most of the rest of tools when you have firebug installed…..

    0
  116. 118

    Nothing new in this post…. i read this kind of post to many time in Some many blogs…. :(

    0
  117. 119

    Not that I like testing IE, but IETester is pretty awesome:
    http://www.my-debugbar.com/wiki/IETester/HomePage

    Allows you to test IE5.5 – IE8 without having to installing them all.

    0
  118. 120

    Fantastic article, thumbs up!!!! Like all the others Firebug is my all time favourite, then Web Developer toolbar, Thanks

    0
  119. 121

    What? No DOM Inspector? It’s more powerful than Web Inspector, you know

    0
  120. 122

    Excellent, excellent, excellent. I have been looking tools for Web Accessibility and i found them here.

    0
  121. 123

    try this, nice tool for develop

    IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8 beta 2, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.

    http://www.my-debugbar.com/wiki/IETester/HomePage

    0
  122. 124

    This is whats backwards about the development community. Its great that there is firebug for Firefox, but is it really needed? The two browsers that you primarly need help debugging in are IE6 & IE7. Currently the way to run both of these browsers on one machine is completely messed up. Microsoft needs to support a better method (Like MultipleIE).

    Problem is, this developer toolbar does not work with the MultipleIE programs. Therefore if I actually wanted to do debugging in IE6 I would have to install an entire virtual machine for IE6 to work properly.

    Release the IE8 Dev Preview with IE6 in the browser mode as well.

    0
  123. 125

    great list – knew about most of them but the screen grab tool is a real find for me. No more print screen and then pulling together in Photoshop!

    0
  124. 126

    firebug, fireftp and developer. the latter one I’ll gave a try after reading this article.

    0
  125. 127

    Thanks everyone for your input! It looks like Firebug is king, seconded by Web Developer tool.

    @Chris and @Marc: I apologize for not linking to the most recent blog post about WebKit, forgive me for my oversight.

    @jimbo : I don’t think it’s fair to compare IE Web Developer vs. Firebug because the way I see IE Web Developer is for people testing in IE5+ browsers (which Firebug obviously can’t do). It lacks a lot of features that Firebug has, not to mention a sub-par interface compared to the most recent version of Firebug – but that’s what you gotta use if you’re browser testing in IE.

    @Justin: In FF Web Developer Toolbar, you can go to CSS > Edit CSS option to edit (preview) style changes on-the-fly. For HTML, you can go to Miscellaneous > Edit HTML option.

    @Anthony Bruno: Firebug isn't just for testing in Firefox, it's a tool you can use to improve your workflow. You can use it to debug your JS for bugs that causes your script/s to break (for example)without having to use a standalone application or hunting it down manually using a combination of error reporting through your browser and alert(foo), which save you a lot of time and frustration. You can also use it to quickly inspect the DOM of remote websites, to see how things fit together. You can edit HTML and CSS on-the-fly to preview how it would look... and more. In short, though Firebug is definitely a great tool for testing In FF, that's not the sole reason for its existence.

    0
  126. 128

    Firebug saved our Souls. Thnanks for the good article

    0
  127. 129

    Hi, thank you for these. I didn’t know much about these before. I think I will first test Web Developer, it sounds great.

    0
  128. 130
  129. 131

    Screen Grab Plugin – where have you been all my life!!

    0
  130. 132

    Hasan Tayyar BEŞİK

    November 22, 2008 6:40 am

    Of course Firebug! Saved my life lots of time.

    0
  131. 133

    The most powerful http-proxy tool I’ve seen is Owasp Web Scarab – features here

    About Charles mentioned above – it has AMF decoding capabilites what is VERY helpful or debugging RIA’s on Flash Platform.

    0
  132. 134

    color picker helps a lot for web desiner and developer

    0
  133. 135

    My Favorites : CSSViewer, Firebug (+ FirePHP), FireFTP and Web Developer Toolbar theres are Cool Add-ons for Firefox ;)

    0
  134. 136

    Really useful post.
    I use Firebug, Web Developer and Fireshot all the time, they are really useful plugins and make your work as a developer so much easier and faster.

    After reading this post, I’ll download ColorZilla, it looks pretty good. thank you!

    0
  135. 137

    Great article, a really handy one to add to the list is MeasureIt.

    0
  136. 138

    The Blackbird javascript logging utility should get a mention too:

    http://www.gscottolson.com/blackbirdjs/

    0
  137. 139

    Great tools I always use, some of them I didn’t know, i will try !
    And take a look on iPhoneSoft which is a database of useful software for iPhone !

    0
  138. 140

    Nice post. I’ve been using most of these for a long time, especially firebug, it’s a lifesaver!

    0
  139. 141

    fireBug+webDeveloper+pixelPerfect

    0
  140. 142

    You missed out MesaureIt, which sits down beside ColorZilla and lets you measure things on the screen giving you their size in pixels. Very handy when you need to know how big something is

    0
  141. 143

    I love firebug, web developer and yslow. Particularly the Edit CSS feature in Web Developer, allows me to have a look into the workings of any site and tweak settings realtime.

    0
  142. 144

    Version 2 of the Web Accessibility Toolbar is available at http://www.paciellogroup.com/resources/wat-ie-about.html.
    The CC license is a bit different as it allows for commercial use. The feature set is a bit different too.
    Very good tool to support your knowledge of web accessibility.

    0
  143. 145

    The combo Firebug + Firecookie is the best ever :) saved me massively much time.
    But I also love a little bit Webdeveloper + User Agent Switcher (for mobile development) + Live HTTP Headers (+ FirePHP) for specific Development.

    Greetings, darki

    0
  144. 146

    Very good tool to support your knowledge of web accessibility.
    http://www.openwavecomp.com

    I agree completely with teamwork. Thanks for this article

    0
  145. 147

    The latest of the Web Inspector is simply fantastic. You can live-edit the code, styles, through a wonderful GUI; You can inspect every sigle element wich has been loaded w/ the page, and a powerful JavaScript debugger/sampler is part oh all of that.

    0
  146. 148

    It has already been mentionned, but scrapbook ia an amazing tool to capture and edit pages; It can also capture whole site (like httrack), inside firefox, and add note or higlight your captures.

    0
  147. 149

    very useful tools..

    i am always use firebug and webdevelopor

    0
  148. 150

    FireFtp is the best ftp program anyway.. and one of the most useful in-browser tools

    0
  149. 151

    I use FireBug and Web Developer and vpn .. anyway can be helpful…

    0
  150. 152

    firebug is my best tool

    0
  151. 153

    i too heart firebug :o)

    0
  152. 154

    Nice apps list, looking forward to trying out a few. I wish there was Fireshot for mac though!

    0
  153. 155

    Here is a useful app I setup recently to edit html or web pages in realtime, hope you like it. URL is: http://text-saver.com/saveasutype/ or you can go to http://www.download.com or http://www.google.com and search for “save as u type”. try and let me know what you think…

    0
  154. 156

    Firebug, web developer, fireshot, yslow and fireftp

    0
  155. 157

    Ohhh, Nice list of tool.I try to use firebug.It is very nice tool.Also visit espinteractivesolutions. com and try to view other useful tools.

    0
  156. 158

    Really this is very useful link,,,i was able to get lot of information….
    I would like to thank ,,,,,to people who took time to prepare wonder full articles and publish on web…..Cheer up….

    Shahid
    Emsoftwaredotin.com

    0
  157. 159

    Perfect – sum up all the tools we need! Thank you for sharing! Best regards from Germany.

    0
  158. 160

    I would suggest in-browser maps generator. Even if almost every webmaster knows how Google maps API works, this tool makes a map in a few seconds. I personally use it for client’s contact pages. Link is there: http://en.tixik.com/api/map/

    0
  159. 161

    You made some respectable factors there. I looked on the internet for the difficulty and located most people will associate with with your website.

    0
  160. 162

    How about HTTP Debugger?
    http://www.httpdebugger.com

    It is a good HTTP Watch alternative and it is 3 times cheaper.

    0
  161. 163

    I Love working with firebug, really i cant forget it…

    0
  162. 164

    I’m grateful I found your site on google. Thanks for the sensible critique. Me and my wife had been just preparing to do some research concerning this. I’m very happy to see these great details being shared freely out there.

    0
  163. 165

    Another helpful tool/IDE is Koding http://koding.com. Worth checking out. :)

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top