如何进行html调试和js脚本调试

JavaScript019

如何进行html调试和js脚本调试,第1张

工具/原料

chrome浏览器   Mozilla firefox   电脑

方法/步骤

1、以chrome为例，首先打开需要调试的页面，按F12快捷键打开调试工具。

2、选择指定的dom节点进行查看和编辑。

3、js断点调试：chrome非常强大，在chrome调试工具栏中，你可以进行js断点调试以及格式化查看（一些大型的门户网站都会将js压缩成无任何格式的代码这在研究时特别费劲）：我先写一段简单的js代码：function debug(){for (var i=0i<10i++){alert(i)}调试截图如下：

4、js ajax调试，ajax技术如今越来越频繁使用，所以，ajax调试也必不可少：在chrome调试工具中，可以查看到当前页面所以的请求，包括ajax请求，以下是页面打开后所有发起的请求。

以IE8浏览器为例，接下来重点介绍并演示如何使用浏览器自带的开发人员工具调试JS程序。（该工具快捷按钮为F12）

1、在工具->Internet选项->高级，去掉“禁用脚步调试（Internet Explorer）”项的勾选。

2、去掉“显示友好http错误信息”项的勾选。最后点击应用，确定按钮。

3、预览表单，当要执行的js程序出现错误时，浏览器会给出提示。

4、在给出的错误提示窗口中，选择“是（Y）”按钮，进入IE浏览器自带的开发人员工具脚本调试界面。

5、根据JS调试信息可以知道，当前JS报错是由于没有找到指定对象“dat”而导致的。我们需要在表单设计器中，修改JS程序并保存。因演示效果的需要，在本例中是没有设置id值为dat的单行输入框控件的，本例中第二个单行输入框控件的id值是data2。修改后的JS代码。

6、将其改成值data2后，再进行测试不会出现JS报错信息，程序得以正常执行。

7、本例只是演示了如何利用IE自带的开发人员工具进行简单的调试工作，如需了解其他调试及排查技巧，请参阅网络及相关书籍进行学习。