Debug tools for JavaScript on FF and IE

got from internet http://hi.baidu.com/taoaishan/blog/item/b0a496af5f2978cf7dd92aef.html and added some comments

 

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.

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)
8. HTTPWatch
9. ieHttpHeader

没有最好,只有最适合!如果要test AJAX,推荐使用HTTPWatch and web development helper, Ajax view都好用,不过功能还未正式完善,而且会在JS里加东西,如果是test 速度的话,会有影响!