Here is a summary of JS error handling and Debugging methods
Method 1: Monitor variable values with the alert () and document.write () methods.
Alert () stops the code from running while the dialog box displays the variable value until the user clicks the OK button, and document.write () continues to run the code after the value is output. When debugging JS, you can choose this method according to the specific situation.
For example, the following code: Adds data in array A, beginning with 1, to array b
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Untitled Page </title>
<script type= "Text/javascript" >
var a=["123", "456", "789", "111"];
function Alertmessage ()
{
var b=new Array ("1111");
for (Var i=0;i<a.length;i++)
{
if (A[i].indexof ("1")!=0)
{
Alert (A[i]);
B.push (A[i]);
}
}
}
</script>
<body >
<input type= "button" value= "dot i" onclick= "alertmessage ()"/>
</body>
If you add more values, you can use the Document.writer () method to avoid repeatedly clicking the OK button.
Method 2: An error was found with the OnError event:
When an exception occurs on the page, the error event is triggered on the Window object, which tells the developer of the error in a certain program and helps the developer find the error, as in the following example:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Untitled Page </title>
<script type= "Text/javascript" >
Window.onerror=function ()
{
Alert ("Sorry, wrong!");
}
</script>
<body onload= "nonexist ()" >
</body>
Code running the onload event with the body tag called a nonexistent function nonexist (), resulting in an error, as shown in the following figure:
Also, code debugging errors for the browser itself appear:
To avoid the browser's own error hint is simple, only need to onerror the event's handler function to return to Ture , the code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Untitled Page </title>
<script type= "Text/javascript" >
Window.onerror=function ()
{
Alert ("Sorry, wrong!");
Return true;//Shielding System event
}
</script>
<body onload= "nonexist ()" >
</body>
But this does not help to resolve the error. In fact, OnError also provides 3 parameters to determine the nature of the error, code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Untitled Page </title>
<script type= "Text/javascript" >
Window.onerror=function (Message,url,line)
{
Alert ("Sorry, wrong: \ n Error Tip:" +message+ "\nurl:" +url+ "\ n line number:" +line);
Return true;//Shielding System event
}
</script>
<body onload= "nonexist ()" >
</body>
Tips for IE Runtime:
Tips for running in Firefox
When an error event occurs in IE, the normal code continues to execute, all variables and data are saved, and can be accessed through the OnError event handler function. In Firefox, normal code execution ends, and all the variables and data that precede the error are destroyed.
Method 3: Find the error with the Try....catch statement
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Untitled Page </title>
<script type= "Text/javascript" >
Try
{
Alert ("This is an example of Try...catch");
alert (hello);
}
catch (Exception)
{
var error= "";
for (var i in exception)
{
error+=i+ ":" +exception[i]+ "\ n";
}
alert (error);
}
</script>
<body>
</body>
IePrompt at run time:
FirefoxPrompt at run time:
PassTry.....catchIt is easy to find the wrong problem, but unfortunately the statement does not handle the statement error very well. The following example:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> Untitled Page </title>
<script type= "Text/javascript" >
Try
{
Alert ("This is an example of Try...catch"));
}
catch (Exception)
{
var error= "";
for (var i in exception)
{
error+=i+ ":" +exception[i]+ "\ n";
}
alert (error);
}
</script>
<body>
</body>
There was an error in the try statement that did not match the parentheses, and the entire code did not run the module in the catch, but instead the browser popped the error box, as shown below:
Method 4: Use the Firefox error console for debugging:
Select "Tools"-> "Error Console" in the Firefox menu bar, You can open it, all errors run in the browse, warnings, messages will pass to the error console, as follows:
Firefox prompts an error message that is more complete and accurate than ie.
Method 5: Use the Firefox plugin firebug
Firebug is Firefox under a development class plug-in, now belongs to the Firefox five-star powerful recommended plug-ins. It integrates HTML viewing and editing, JavaScript consoles, and network health monitors, and isthe right-hand man for developing Javascript, CSS, HTML, and Ajax . Firebug, like a sophisticated Swiss Army knife, analyzes the details of a Web page from various angles , bringing great convenience to web developers. Specific how to install the use of Firebug can refer to this article: http://apps.hi.baidu.com/share/detail/15314208
Method 6: Use miscrosoft Script Debugger Debugging:
In the IE menu bar, open the tools->Internet options, select Advanced, and remove the "Disable script debugging" check box.
Specifically how to use it is not introduced.
Method 7: Using the JS debugging tool under IE companion.js
A tool like the Firedebug tool in Firefox is similar to a toolkit, it is characterized by a good hint error, and can be in IE Browser under the console output. Convenient and timely debugging.
Specific reference to this article: http://hi.baidu.com/argv/blog/item/f4efe67ac370f7e12f73b3ad.html
There are other JS debugging tools will not be introduced, we can also introduce more than a few better JS error handling methods or JS debugging tools.
