Best Free Web Developer Tool for Debugging

Do you ever get stuck finding bug of your web application? or you would like to optimize your website but you don’t know what tools you should use. Here is collection of best free tool for debugging in each popular browser to save your day. (Mozilla Firefox, Internet Explorer, Opera, and Safari).

Mozilla Firefox

1. Firebug (mirror)

   Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. A must have extension for debugging.

   
   More about Firebug:

   • Firebug Documentation
   • Introduction to Firebug
   • Firebug Tutorial by Michael Sync
     
   • An In-depth Look At The Future of Javascript Debugging With Firebug
   • FireBug Tips and Tricks
   • AJAX Debugging with Firebug
   • Joe Hewitt Firebug power user demo (video)
   • A guide to Javascript debugging for firefox (video)
   • How to use firebug (video)
2. YSlow! (mirror)

   YSlow analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites. YSlow is a plugins for Firebug, therefore you have to install Firebug first.

   More about YSlow:

   • Podcast and Screencast
     
   • User Guide
3. Web Developer Toolbar (mirror)

   Adds a menu and a toolbar with various web developer tools.

   

4. HTML Validator (mirror)

   HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The extension can validate the HTML sent by the server or the HTML in the memory (after Ajax execution). (FAQ, UserGuide)

   

5. URL Params (mirror)

   Shows you the GET and POST parameters of the current website in the sidebar. You can alter their values, add new parameters, switch get/post and more. (How to Use - General Usage)

6. Modify Headers (mirror)

   Add, modify and filter http request headers. You can modify the user agent string, add headers to spoof a mobile request (e.g. x-up-calling-line-id) and much more.

7. Tamper Data

   Use tamperdata to view and modify HTTP/HTTPS headers and post parameters, trace and time http response/requests, security test web applications by modifying POST parameters. (Tutorial)

Another debugging extensions for firefox that you might interested in:

1. Fire PHP

   FirePHP allows you to take a deeper look at all the work your PHP code does to generate that page you are currently looking at in your Firefox browser.

   Just install the FirePHP Firefox extension, PHP PEAR package and add a few lines of code to your PHP application to get started. You will see a “FirePHP” tab in your Firebug extension to bring your PHP backend logic to your fingertips!

   More about FirePHP:

   • FirePHP Companion for Developer
     
   • How to use Firebug to Debug PHP Scripts
2. jQuery Logging

   I’ve been having a lovely day at work, fiddling with jQuery. I started to come up with some really gnarly selector chains though, and I wondered what nodes they were actually addressing. So, I wrote a tiny jQuery extension that logs the current jQuery selection to the firebug console. (Dominic Mitchell)

Internet Explorer

1. Internet Explorer Developer Toolbar

   The Microsoft Internet Explorer Developer Toolbar provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages.

   
   More about Internet Explorer Developer Toolbar:

   • Planning/experimentation with the IE Developer Toolbar (video)
     
   • CSS Debugging with the IE Developer Toolbar (video)
     
2. Web Development Helper

   Web Development Helper is an Internet Explorer plugin that provides a set of useful tools to both Ajax/JavaScript developers as well as ASP.NET page and control developers.

   For client-side script-based development, Web Development Helper provides HTTP tracing capabilities, as well as much improved script diagnostics, and tracing facilities, as well as an immediate window.

   For ASP.NET developers, when developing against your site on your local development machine, this tool provides the ability to view ViewState, ASP.NET trace messages, contents of your cache etc.

   More about Web Development Helper:

   • Introduction to Web Development Helper
   • Debugging Web Applications using Web Development Helper
   • HTTP monitoring and better script errors with Nikhil’s Web Development Helper (video)
3. Web Accessibility Toolbar for IE

   The Web Accessibility Toolbar has been developed to aid manual examination of web pages for a variety of aspects of accessibility… read more…

   
   
   More about Web Accessibility Toolbar :

   • Similar Toolbar by AIS Web Acessibility Toolbar
4. DebugBar (Free for personal use)

   DebugBar give you features such as DOMInspector, HTTPInspector, Javascript Inspector, Javascript Console, HTML Validator and other more.

   
   More about DebugBar:

   • Wiki
   • Quickly determine rendering mode with DebugBar (video)
5. TamperIE Web Security Tool

   Enables HTML-form tampering for penetration testing of web apps.

6. ieHTTPHeaders

   ieHTTPHeaders is an Explorer Bar for Microsoft Internet Explorer that will display the HTTP Headers sent and received by Internet Explorer as you surf the web. It can be useful in debugging various web-development problems related to cookies, caching, etc.

7. Ajax View

   The goal of the Ajax View project is to improve developer’s visibility into and control over their web applications’ behaviors on end-user’s desktops. The Ajax View approach is to insert a server-side proxy (or web server plugin) in-between the web server machines and the end-user’s browser.

   This proxy captures the web application’s JavaScript code as it is being sent to a browser and rewrites the code to insert extra instrumentation code. The injected instrumentation code runs with the rest of the web application inside the end-user’s browser and can capture performance, call graph, application state and user interaction information, providing visibility directly into the last hop of the user’s experience.

   More about Ajax View:

   • JScript Profiling with AjaxView (video)

Safari

1. Enable Debug Menu

   To enable debug menu in safari you can follow the instruction in apple developer page FAQ. Other instruction to install in Windows by Rakaz.

2. New Web Inspector

   …We know that a lot people have found the current Web Inspector useful, and we have gotten a lot of feedback and suggestions about how to make it even better. And boy have we been listening! We have taken the current Web Inspector and have added a bunch of new features that you will find invaluable for web development… read more… (Wiki)

   

3. Drosera (Mac OSX Only)

   I would like to introduce a new addition to the WebKit open source tools—a JavaScript debugger. Drosera, named after the largest genera of bug eating plants, lets you attach and debug JavaScript for any WebKit application—not just Safari. (Wiki)

   

4. Safari Stand

   An InputManager plugin that adds various useful functionality, such as bookmark/history searching, thumbnail tab sidebar, view related cookies/css/images for a site. read more from PimpMySafari…

   More about Safari Stand:

   • Documentation
5. Safari Tidy

   The Safari Tidy plugin is a small plugin that lets you validate the webpages you browse for (x)html compliance. The actual validation is done by Tidy.

   

6. Safari WebDevAdditions
   

   WebDevAdditions adds a menu to the Safari browser with few useful functions for web developers. It allows to disable (hide) images, shows table structure, block level elements (divs, paragraphs, forms), various informations about images (size, path), links, CSS’s.

Opera

1. Web Developer Toolbar

   The web developer toolbar is a menu and toolbar setup for Opera which brings together functions related to web development, validation services and links to standards and other documentation. It integrates parts of Toby’s W3-dev Menu, MooseCSS’s menu, and countless BookMarklets taken from various places (Jesse, Aleto, SlayerOffice, Tarquin and others).

   

2. Opera Developer Tools

   These developer tools have been used by Web Application developers at Opera Software for some time. The tools are early previews, and should be considered alpha quality software. They are provided below in the form of buttons that can be dragged to any Opera toolbar. This tools contain many useful feature such as DOM, JS, CSS, HTML inspection and other more.

   

3. Web Acessibility Toolbar for Opera

   The Web Accessibility Toolbar has been developed to aid manual examination of web pages for a variety of aspects of accessibility. It consists of a range of functions that… read more…

   

Javascript Based

1. XRAY

   XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to see the box model for any element on any web page.

   

2. Aadvark

   Aardvark can be run as a “bookmarklet” — a small snippet of javascript code that is called when you select a bookmark — to allow it to run in non-Firefox browsers, as well as allowing it to be quickly and easily modified and extended.

3. Firebug Lite

   Firebug is an extension for Firefox, but what happens when you need to test your pages in Internet Explorer, Opera, and Safari? If you are using console.log() to write to Firebug’s console, you’ll wind up with JavaScript errors in these other browsers, and that’s no fun.

   The solution is Firebug Lite, a JavaScript file you can insert into your pages to simulate the Firebug console in browsers that are not named “Firefox”.

4. YUI Logger

   The Logger Control provides a simple way to read or write log messages with a single line of code. With this control, you can tap into the rich event-driven messages included with the YUI Library’s debug files; This messaging allows you to get a fuller picture of the inner workings of any YUI Library component. The Logger Control provides a simple messaging interface that allows you to filter, pause, resume, and clear log messages on your screen.

Others

1. Fiddler

   Fiddler is a HTTP Debugging Proxy which logs all HTTP traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP Traffic, set breakpoints, and “fiddle” with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.

   Fiddler is freeware and can debug traffic from virtually any application, including Internet Explorer, Mozilla Firefox, Opera, and thousands more.

   Requirements: Windows 2000 / XP / 2003 / Vista with Microsoft .NET Framework v2.0 or later.

   

   More about Fiddler:

   • Help and Documentation
   • Demonstration Videos
   • Developer Info
   • Essential Debugging Tools
   • Fiddler PowerToy - Part 1: HTTP Debugging
   • Fiddler PowerToy - Part 2: HTTP Performance
   • Ajax Debugging with Microsoft Fiddler
   • Fiddler 2 (HTTPS Version)
2. WebScarab

   WebScarab is a framework for analysing applications that communicate using the HTTP and HTTPS protocols. It is written in Java, and is thus portable to many platforms. WebScarab has several modes of operation, implemented by a number of plugins. In its most common usage, WebScarab operates as an intercepting proxy, allowing the operator to review and modify requests created by the browser before they are sent to the server, and to review and modify responses returned from the server before they are received by the browser. WebScarab is able to intercept both HTTP and HTTPS communication. The operator can also review the conversations (requests and responses) that have passed through WebScarab.

   

   More about WebScarab:

   • Getting Started
   • Webscarab Next Generation
   • Chaining Webscarab onto another proxy
   • Fuzzing with Webscarab
   • How to test session identifier strength with WebScarab
   • Scripting in WebScarab
   • How to modify proxied conversations
   • Webscarab Tutorial by Travisaltman
   • Documentation
   • Webscarab for Eclipse
   • Exploiting input validation with Webscarab
3. Burp Suite

   Burp Suite is an integrated platform for attacking web applications. It contains all of the Burp tools with numerous interfaces between them designed to facilitate and speed up the process of attacking an application. All tools share the same robust framework for handling HTTP requests, authentication, downstream proxies, logging, alerting and extensibility.

   

   More about Burp Suite:

   • Help
   • Spike and Burp for real world computer security usage
4. Paros Proxy

   A Java based HTTP/HTTPS proxy for assessing web application vulnerability. It supports editing/viewing HTTP messages on-the-fly. Other featuers include spiders, client certificate, proxy-chaining, intelligent scanning for XSS and SQL injections etc. (User Guide in PDF, FAQ)

5. Visual Web Developer Express

   Provides a fun, easy-to-use, easy-to-learn tool for new web Developers looking to build dynamic web applications.

   More about Visual Web Developer Express:
   

   • Script debugging with Visual Web Developer Express (video)
6. Selenium

   Selenium is a test tool for web applications. Selenium tests run directly in a browser, just as real users do. And they run in Internet Explorer, Mozilla and Firefox on Windows, Linux, and Macintosh. No other test tool covers such a wide array of platforms. (Documentation, FAQ, Wiki)

Well, that’s all folks. But if you know another useful free tools that not included in the list above please help us by writing it in the comments so we can add it to the collection list. Thank you.

Note: most of the image and description are taken from it’s own website.