Common use of JS Debugging tools to help you quickly locate the problem (firebug+ IE "Developer Tools")

Source:

Here took a little time to summarize the next project in the more appropriate and easy to get started JS debugging tools, methods, advantages and disadvantages as well as some debugging related function points or strategies, share to the students, only to offer, welcome to discuss the supplement.

First, Firebug: If the project can support Firefox, I still the first Firebug as JS debugging preferred, although some shortcomings, but the basic can meet the needs of everyone 90% debugging scenarios.

A, function explanation

See, the figure has marked the function of the five key points, the following sequence of instructions, the first switch to the JS debugging function in callout 1 tab "Script", open the current page in callout 2 load of all static JS link resources, Firebug Directly enter the mouse type keywords can appear callout 2 text box below the Quick Search open the required specified JS file;

Take Eq-commom.js as an example, the careful classmate should have found that the page load is compressed format JS file, in fact, Firebug not only provides the line set debugging breakpoints, also support the sentence-level breakpoint debugging, so the compression file debugging also no harm, just select the appropriate statement right-click, as follows:

But we must agree that such debugging is a painful thing, of course, special circumstances, except when helpless. To solve this problem first to distinguish between the operating environment, if it is a development environment, you can change the environment configuration so that the page from the loaded eq-common.js compressed file to load eq-common-src.js source format file. If it is the online environment to check the problem or the development of the environment configuration is more trouble, teach everyone a lazy and practical way, is to paste the contents of the Eq-common-src.js source format file into the Eq-common.js compressed file (of course, the online environment needs to bind the static load resources on the line to local). Of course, this is assumed to have the source code running environment under the front, if there is no firebug there is no way, this is also a firebug of the shortcomings (below in the IE "Developer Tools" will talk about this solution).

The most common breakpoints are basically two types: line breakpoint and conditional breakpoint. Line breakpoint mode is most commonly used, that is, before the line that needs to be debugged, click Add Breakpoint, as follows:

This will cause the program to be interrupted and can be operated and observed in the interrupt state, including stepping, step over, stepping out (i.e. jumping to the next breakpoint) debugging, viewing or monitoring the current variable, viewing the current stack information (which can be traced quickly when there is a problem at the current breakpoint), View or reset administrative breakpoints (where you can also locate breakpoints); a command-line feature that allows you to write scripts in the current state to perform some simple or more complex operations while debugging.

Conditional breakpoints, while not using as many as line breakpoints, are useful in some cases, as the name implies when a procedure or statement in a program satisfies a particular condition when the program is running. For example, there is a problem in a large for loop, but in many cases there is a problem when some data is generated, and if you take a line break in the loop that is painful, you have to cycle through a loop to debug the observed variable value positioning problem. Conditional breakpoints only need to set a conditional breakpoint on a procedure or statement, and when the program runs to this procedure or statement and satisfies a given condition, the program interrupts the pause, saves time and effort, and locates quickly. Such as:

Therefore, depending on the scene, choose the appropriate debug mode.

Second, IE "Developer Tools"

Since IE8, in the browser has integrated the "developer Tools" (previously IE7 need to install separately, the function is not so powerful), basic functions and Firebug similar, here is mainly for its debugging function explained.

will be compared with the basic Operation interface diagram of the first firebug of this article, it is easy to see that the debugging function is basically the same, so this is no longer pose. It's just a little more on the right. A function point showing current breakpoint local variable current situation, compared with firebug, at any time can observe or trace the current local variable including the data information of the object, double-click the corresponding "value" column or right-click can easily change the value of the current local variable including the object's property values, You can also open the console to write JS scripts in the current local environment to execute for more complex logical operations.

In addition, it also supports the simulation of multiple IE version browsers, which greatly facilitates the testing of multiple IE browsers. You can specify that the current IE browser is running in a specific version, or that only the currently switched pages are running in the specified version of IE browser. That is "browser mode" or "Document mode" running

When you turn on Internet Explorer Height mode, you can detect and locate script errors at any time on the current page and prompt for error cause information in the console, and if the problem is unclear, you can often open the call stack to see the source of the error.

This tool also has a very good function of firebug, that is, before debugging the compression or non-compression of the current page JS format, and the format of the JS debugging, which is very useful for analyzing the problem on the line, after all, after the compression of the JS file debugging to make people feel pain.

Compared to debugging, the above seems to be IE "developer tools" than firebug to make a few points, but this tool also has its shortcomings, that is, its DOM location and style processing deficiencies, but also need to assist other such as IE Deweloper software, such as Firebug integration together convenient In addition, this tool can not be like other plug-ins embedded in the browser window, the total to switch windows back and forth is very troublesome, there is one is not like Firebug as many letter words fuzzy search need to debug JS file, especially in the current page load JS file more cases, find it more troublesome, But fortunately, in ascending alphabetical order, see.

Common use of JS Debugging tools to help you quickly locate the problem (firebug+ IE "Developer Tools")