Home > Developer > JavaScript
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>
Code runningBodyMarkedOnloadA nonexistent function is called during the event.NonExist (),An error occurs, for example:
To avoid browser errors, you only needOnerrorFinally, the event processing function returnsTureThe 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>
InIERunning prompt:
InFirefoxRunning prompt
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>
IERunning prompt:
FirefoxRunning prompt:
PassTry ..... CatchYou can easily find the problem, but it is a pity that the statement does not properly handle the 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>
TryThe statement contains an error that does not match the brackets, but the entire code is not running.CatchThe error prompt box is displayed in the browser, for example:
Method4: UseFirefoxError console debugging:
InFirefoxSelect "Tools" in the menu bar "->"Error Console",You can open it. All errors, warnings, and messages running during browsing will be transmitted to the error console, as shown below:
FirefoxThe error message to be comparedIEComprehensive and accurate.
Method5: UseFirefoxPlug-insFireBug
FirebugYesFirefoxA development plug-in under, now belongsFirefoxOne of the five-star powerful recommendation plug-ins. It setHTMLView and edit,JavascriptIntegrated with the console and network status monitorJavaScript,CSS,HTMLAndAjaxRight-hand.FirebugLike a Swiss Army knife, it is analyzed from different anglesWebToWebDevelopers bring great convenience. How to install and useFireBugRefer to this article:Http://apps.hi.baidu.com/share/detail/15314208
Method6: UseMiscrosoft Script DebuggerDebugging:
InIEOpen "Tools" in the menu bar "->"InternetSelect "advanced" and remove the check box "Disable script debugging.
We will not discuss how to use it.
Method7: UseIEUnderJSDebugging toolsCompanion. js
ImageFirefoxInFiredebugA tool is similar to a toolkit. It features a good error prompt and can be found inIEConsole output appears below the browser.Convenient and timely debugging.
For details, refer to this article:Http://hi.baidu.com/argv/blog/item/f4efe67ac370f7e12f73b3ad.html
There are otherJSDebugging tools will not be described one by one. You can also introduce several better debugging tools.JSError handling method orJSDebugging tool.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
