JavaScript error handling and debugging experience summary

JavaScript error handling and debugging experience summary_javascript skills

WBOY

Release： 2016-05-16 18:21:42

Original

1219 people have browsed it

Here is a summary of JS error handling and debugging methods
Method 1: Use alert() and document.write() methods to monitor variable values.
alert() will stop the code from continuing to run while the dialog box pops up to display the variable value until the user clicks the "OK" button, while document.write() continues to run the code after outputting the value. When debugging JS, you can choose this method according to the specific situation.
For example, the following code: Add the data starting with 1 in array a to array b

Copy the code The code is as follows:

 
Untitled page</ title> <br><script type="text/javascript"> <br>var a=["123","456","789","111"]; <br>function AlertMessage() <br>{ <br>var b=new Array("1111"); <br>for(var i=0;i<a.length;i ) <BR>{ <BR>if(a[i].indexOf( "1")!=0) <BR>{ <BR>alert(a[i]); <BR>b.push(a[i]); <BR>} <BR>} <BR>} <BR></script> <br></head> <br><body > <br><input type="button" value="Click me" onclick="AlertMessage()"/> <br></body> <br></html> <br>
</div> <br>If you add a lot of values, you can use the document.writer() method to avoid clicking the OK button repeatedly. <br><strong>Method 2: Use the onerror event to find the error: <br></strong>When an exception occurs on the page, the error event will be triggered on the window object. It can tell the developer that an error has occurred in a certain program, and Help developers find the error, as in the following example: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="98995" class="copybut" id="copybut98995" onclick="doCopy('code98995')"><u>Copy code </u></a></span> The code is as follows: </div>
<div class="codebody" id="code98995"> <br>< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br><html xmlns="http://www.w3.org/1999/xhtml" > <br><head> <br><title>Untitled page

When the

code runs the onload event marked by body, it calls a non-existent function NonExist(), which is generated by An error occurred, as shown below:

At the same time, the code debugging error of the browser itself also appeared:

It is very simple to avoid the browser's own error message. You only need to handle the onerror event and finally return ture. The code is as follows:

Copy code The code is as follows:

Untitled page

But this approach does not solve the error Any help. In fact, onerror also provides 3 parameters to determine the nature of the error. Code:

Copy code The code is as follows:

 
Untitled page 
 
< ;body onload="NonExist()" >

Prompt when

is running in IE:

Prompt for running in Firefox

When an error event occurs in the IE browser, the normal code will continue When executed, all variables and data are saved and can be accessed through the onerror event handler. In Firefox, normal code execution will end, and all variables and data before the error occurs will be destroyed.
Method 3: Use try….catch statement to find the error

Copy code The code is as follows:

Untitled page

IERuntime prompt:

Firefox Tips when running:

It can be easily done by try…..catch Found the wrong question, but unfortunately this statement does not handle statement errors well. For example:

Copy code The code is as follows:

Untitled page

try语句里面出现了括号不匹配的错误，而整个代码并没有运行catch中的模块，而是浏览器弹出了错误提示框，如下图：

方法4：使用Firefox错误控制台调试：

在Firefox菜单栏中选择“工具”－>“错误控制台”,便可以打开它，所有浏览中运行的错误，警告，消息都会传错误控制台，如下：

Firefox提示的错误信息要比IE全面而且准确的多。

方法5：使用Firefox插件FireBug

Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。具体如何安装使用FireBug可参考这篇文章：http://apps.hi.baidu.com/share/detail/15314208

方法6：使用Miscrosoft Script Debugger调试：

在IE菜单栏中打开“工具”－>“Internet选项“，选择”高级“，将”禁用脚本调试“复选框的勾去掉。

具体如何使用就不介绍了。

方法7：使用IE下的JS调试工具companion.js

一款像firefox中的firedebug工具类似的一个工具包，它的特点就是可以有好的提示错误，并且可以在IE浏览器下方出现控制台输出.方便及时调试。

具体可参考这篇文章：http://hi.baidu.com/argv/blog/item/f4efe67ac370f7e12f73b3ad.html

There are other JS debugging tools, so I won’t introduce them one by one. You can also introduce some better JS error handling methods or JS Debugging tools.