Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

15 Helpful In-Browser Web Development Tools

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 Link

Firebug - screen shot.1

Firebug2 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 Link

Web Developer - screen shot.4

The Web Developer5 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 Validator6 and HiSoftware’s Web Content Accessibility Report7, 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 Link

YSlow - screen shot.8

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

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 Link

Internet Explorer Web Developer Toolbar - screen shot.15

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

Fiddler Web Debugger - screen shot.18

Fiddler19 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 Link

DebugBar - screen shot.24

DebugBar25 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 API26 (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 Link

HttpWatch - screen shot.27

HttpWatch28 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 HTTPS29 traffic to help you debug, inspect and tweak your secure SSL-based connections30; 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 editions31 to see the exact differences.

Live HTTP Headers Link

LiveHTTPHeaders - screen shot,32

Live HTTP Headers33 is a Firefox extension that allows you to inspect HTTP request and response headers34. 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 Link

Web Accessibility Toolbar - screen shot.35

The Web Accessibility Toolbar36 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 tools37, 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 Australia38 are the Colour Contrast Analyser39, which analyzes the contrast of foreground and background colors for readability, and the Complex Table Mark-Up (or Com Tab) Toolbar40, which can help you understand (and construct) complex tables that are usable by non-traditional Web browsers (such as screen readers).

Further Reading

Fangs Link

Fangs - screen shot.42

Fangs43 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 JAWS44 or Windows Eyes45.

Further Reading

Venkman JavaScript Debugger Link

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 Link

ColorZilla - screen shot.50

ColorZilla51 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 Link

FireShot - screen shot.52

FireShot53 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 Link

Web Inspector - screen shot.54

Web Inspector55 is part of the Webkit open-source browser engine project56. 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 Link

FireFTP - screen shot.57

FireFTP58 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? Link

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 Manager59 for developers using SQLite databases, and Opera Dragonfly60 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.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


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

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


  2. 2

    Very useful tools.

    I always use FireBug and Web Developer.

  3. 3

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

  4. 4

    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.

  5. 5

    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.

  6. 6

    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.

    • 7

      Great option!

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

    • 8

      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.

  7. 9

    I use Charles ( over fiddler, its a lot better!

  8. 10

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

  9. 11

    FIREBUG! I love you.

  10. 12


    November 18, 2008 2:39 pm

    I cant exist without Firebug!

  11. 13

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

  12. 14

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

  13. 15

    Check out Aardvark for Firefox :-)

  14. 16

    Great post, as usual!

    Did not notice the RSS icon… awesome!

  15. 17

    webdeveloper toolbar for color info

  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.

  17. 19

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

  18. 20

    measureIT is quite usefull tool too.

  19. 21

    Wow… pretty shweet!

  20. 22

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


↑ Back to top