How to debug Web pages and JavaScript

You're not still debugging your JS code with constant alert.

To introduce the tools I use to debug Web pages.

for IE

The Script Debugger uses office built-in or. NET Script Debugger (if you don't go to Microsoft to download the simple board), all you have to do is to open script debugging (Modify IE tools--options--Advanced 2 default settings: Remove "Disable scripting Tips") Select "Show error notifications for each script"). And then you want to enter the debugging of JS Place to add a sentence "debugger;" You can enter the debugging environment when running to this sentence, when the page error, pop-up dialog box to ask you whether debugging, click "Yes" may also enter the script debugging. debugging into the. NET debugging environment, you can set breakpoints, step tracking, and so on, you can see the variable content, variable assignment, view call stack, etc., debugging their own development of the Web page that is quite good

HttpWatch is a powerful tool for monitoring HTTP protocol interactions between browsers and servers, surfing the web for a trial version, with all of his interactions hidden.

for Firefox

Firebug is a great plugin, set breakpoints, look at the DOM, click on the page positioning code, in many JS file to find the definition of methods and so on, try it, so that you can not refuse. Relative to the script debugger with IE, the advantage of Firebug is that it can easily set breakpoints for others ' website JS, and then follow up the details of the person. JS itself is transparent, this is a steal to learn others JS Sharp weapon

Live HTTP Headers is a similar httpwatch plug-in, but not so powerful, if you visit the site is not only support Firefox does not support IE, then you still use the HttpWatch bar

With the Firebug, I don't seem to need anything anymore, yes. However, there are a few plug-ins are still very good, anyway, free than the use may be for your appetite

View Source Chart old plug-ins, you can easily view the structure of the page

Jsview Easy to view all JS and CSS files referenced by the page, for the page containing dynamic JS JS view is very helpful

IE Tab provides a shortcut for switching to IE, which is easy to compare and eliminates the boredom of copying URLs between IE and FF

In a word, FF tools-> add-on software-> get extensions, search in the open page search box above these plug-ins can be downloaded

And there's the FireFox2. You can choose to install the DOM Viewer and then open it from the Tools menu by selecting the Custom installation at installation time with the Dom viewer . The DOM Viewer displays the clear domtree structure of the current page, selects a leaf node, and can view the properties and methods that he supports. This can easily know some ie commonly used property methods, in Firefox there is no corresponding method, method name is the same. Who asked me not to find Firefox's HTML and JS manuals?

for Opera

Opera's own dev tools are opened with tools-> advanced-> Developer tools. Similar to the DOM viewer and the Jsview combination, the function is general, try to know. Just do not set breakpoints and variables watch function, unhappy. However, Opera and Firefox are very similar, and basically the FF run of opera also line. A few days ago I used Yui developed a cross-browser watch tool

a common manual

the Chinese "DHTML Manual" and the Chinese "JScript manual" are in CHM format, we find it online, are for IE manual. FF does not have a suitable Chinese manual, the development of basic guess, we recommend

lazy, no map. If there's something that's not clear, leave me a message.