JavaScript error handling and debugging experience

Last Update:2018-12-08 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

The following describes how to handle and debug JS errors.
Method 1: Use the alert () and document. write () methods to monitor variable values.
When the variable value is displayed in the pop-up dialog box, alert () stops running the code until the user clicks "OK", while the document. write () continues to run the code after the output value. This method can be selected based on the actual situation when debugging JS.
For example, the following code adds data starting with 1 in array a to array B. Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> No title page </title>
<Script type = "text/javascript">
Var a = ["123", "456", "789", "111"];
Function AlertMessage ()
{
Var B = new arrays ("1111 ");
For (var I = 0; I <a. length; I ++)
{
If (a [I]. indexOf ("1 ")! = 0)
{
Alert (a [I]);
B. push (a [I]);
}
}
}
</Script>
</Head>
<Body>
<Input type = "button" value = "" onclick = "AlertMessage ()"/>
</Body>
</Html>

If many values are added, you can use the document. writer () method to avoid repeated clicking the OK button.
Method 2: locate the error using the onerror event:
When an exception occurs on the page, the error event is triggered on the window object. It tells the developer of an error in a certain program and helps the developer locate the error, as shown in the following example:Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> No title page </title>
<Script type = "text/javascript">
Window. onerror = function ()
{
Alert ("sorry, an error occurred! ");
}
</Script>
</Head>
<Body onload = "NonExist ()">
</Body>
</Html>

When the code runs the onload event marked by the body, it calls a NonExist () function that does not exist and produces an error, such:

At the same time, the browser code debugging error also occurs:

To avoid browser error prompts, you only need the onerror event processing function to return true. The Code is as follows:Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> No title page </title>
<Script type = "text/javascript">
Window. onerror = function ()
{
Alert ("sorry, an error occurred! ");
Return true; // Block System Events
}
</Script>
</Head>
<Body onload = "NonExist ()">
</Body>
</Html>

However, this solution does not help resolve errors. In fact, onerror also provides three parameters to determine the nature of the error. Code:Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> No title page </title>
<Script type = "text/javascript">
Window. onerror = function (message, url, line)
{
Alert ("sorry, error: \ n error prompt:" + message + "\ nUrl:" + url + "\ n row number:" + line );
Return true; // Block System Events
}
</Script>
</Head>
<Body onload = "NonExist ()">
</Body>
</Html>

Prompt during IE running:

Prompt for running in Firefox

When an error occurs in the IE browser, the normal code continues to be executed. All the variables and data are saved and can be accessed through the onerror event processing function. In Firefox, normal code execution ends, and all variables and data before errors occur are destroyed.
Method 3: Use try .... Catch statement found Error

Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> No title 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>
</Head>
<Body>
</Body>
</Html>

Prompt when IE is running:

Prompt when Firefox is running:

Try ..... Catch can easily locate errors, but it is a pity that the statement does not properly handle statement errors. For example:Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> No title 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>
</Head>
<Body>
</Body>
</Html>

The try statement contains an error that does not match the brackets, but the entire Code does not run the catch module. Instead, an error prompt box is displayed in the browser, for example:

Method 4: Use the Firefox error console for debugging:

Select "tool"> "error console" in the Firefox menu bar to open it. All errors, warnings, and messages running during browsing will be transmitted to the error console, as shown below:

Firefox prompts more comprehensive and accurate error messages than IE.

Method 5: use Firefox plug-in FireBug

Firebug is a development plug-in under Firefox, and is now one of Firefox's five-star powerful recommendation plug-ins. It integrates HTML viewing and editing, the Javascript console, and the network condition monitor. It is a powerful helper for developing JavaScript, CSS, HTML, and Ajax. Firebug is like a Swiss Army knife. It analyzes the details of the Web page from different perspectives, bringing great convenience to Web developers. For details about how to install and use FireBug, refer to this article: http://apps.hi.baidu.com/share/detail/15314208

Method 6: Use Miscrosoft Script Debugger for debugging:

On the IE menu bar, choose tools> Internet Options, select advanced, and remove the check box "Disable script debugging.

We will not discuss how to use it.

Method 7: Use the JS debugging tool companion. js under IE

A toolkit similar to the firedebug tool in firefox is characterized by prompts of errors and console output below IE browser for timely debugging.

For details, refer to this article: http://hi.baidu.com/argv/blog/item/f4efe67ac370f7e12f73b3ad.html

Other JS debugging tools will not be introduced one by one. You can also introduce several better JS error handling methods or JS debugging tools.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

JavaScript error handling and debugging experience

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support