调试Js的常用调试方法整理集合全面详细

Js的常用调试方法整理集合全面详细

JSP的编译器指引与指令组件

编译器指示 <%@编译器指示%>

声明 <%!声明 %>

表达式<%=表达式%>

程序代码段/小型指令 <%程序代码片段%>

注释 <%--注释--%>

下面的方法是自己总结的也许有误欢迎指正。

方法1使用alte r()方法或者do cument .write()方法

如果要中断代码的运行监视变量的值则使用ale rt()方法

如果需要查看的值很多则使用do cument.w rite()方法避免反复单击“确定”按钮方法2使用window.onerror=function(sMes sage,sUrl,sLine){};

Onerror函数的三个参数用于确定错误确切的消息代表的意思依次为错误信息、发生错误的文件、发生错误的行号。

<script type="text/javascript">window.onerror=testError;function testError(){arglen=arguments.length;var errorMsg="参数个数 "+arglen+"个";for(var i=0;i<arglen;i++){errorMs g+="\n参数"+(i+1)+" "+argume nts[i];

}alert(errorMs g);w indow.onerror=null;return true;

}function test(){error

}test()

</script>

首先将tes tError方法绑定给onerror事件然后在tes t方法里触发一个错误 当出错时函数testError捕获到了三个参数通过将函数绑定到onerror事件就可以在页面出错时捕获以上三个参数。

方法3 try{}c atc h(e){}语句方式

例如 <script type="text/javascript" language="javascript">try

{

alert("触发异常");

}c atch(_ex)//可以省略“_ex”参数

{var err="错误信息";for (var i in_ex)

{err+="\n参数名 "+i

+"\t参数值 "+_ex[i];

} .alert(err); //打印错误

}finally //finall y可以被省略. ..

{alert("finall y总是会运行");

}

</script>

但是try catch并不能很好的来处理java script的语法错误

方法4使用相关调试工具如IE Micros oft Script Debugg er

首先打开In ternet选项——高级将“禁用脚本调试Intern et Explor er”的勾去掉如果想其他浏览器也启用调试那么可以把“禁用脚本调试其他 ”的勾也去去掉。然后在你想需要地方进行调试就加入deb ugger。在程序中添加一个debu gger;这个就相当于一个永久的断点每次运行的时候都会进入到这里除非你将de bugger这;个删除或者注释掉才不会进入到这个断点这里。

方法5 IE8自带的开发人员工具

“开发人员工具”默认是关闭的必须手动打开。方法是点击“工具”菜单中的“开发人员工具”或者直接按F 12键。开发人员调试工具可以调试CSSHT ML,脚本,探查器等可以设置断点来进行调试其调试方式跟VS差不多。

模式,JS调试,探查器

在上一篇文章IE8“开发人员工具”使用详解上(各级菜单详解)中我们详细地讲解了IE8开发人员工具中各个菜单中命令的使用方法相信很多朋友应该已经使用上了。而IE8开发人员工具更强劲的功能例如如何测试版本兼容性、如何利用开发人员工具调试JavaScript脚本以及如何利用探查器检测页面脚本函数效率等我们将在本篇文章中讲解。小弟拙笨此处仅为抛砖。

浏览器模式

应了《无间道》的那句话——“出来混迟早是要还的 ”。 IE6种下的苦果现在果然到了要咽下的时候了。当IE8发布的时候他不得不面对着世界上成千上万“只有在IE6中才能正常显示”的页面。不发布IE8了吧 FireFo x和Chrome又跟着后面抢蛋糕不管那些“IE6 only”的页面吧那浏览器出来还不被人骂死让所有的站长都把页面重构吧想想自己都要笑。唉这可咋整呀。

唉有了 咱采取一个手段让用户自己去处理如果他碰到了“IE6 only”页面就让他自己手动处理一下让浏览器还用老的渲染模式渲染页面这虽然麻烦了一点用户但是也不失是个办法。于是“浏览器模式”出来了。说白了就是让用户选择当前页面用何种IE版本去渲染。

举个例子吧顺便练习一下《IE的有条件注释详解》 核心代码如下——

<div id="divTest">

<!--[if IE 7]>

浏览器是IE 7

<![endif]-->

<!--[if IE 8]>

浏览器是IE 8

<![endif]-->

</div>

让我们来试试这个页面在不同的浏览器模式下的显示效果吧——

IE8开发人员工具之浏览器模式

对于普通用户微软官方推荐的是这个玩意——兼容性视图按钮。

当然对前端开发人员来说这个工具主要用来测试页面多浏览器兼容性而已。但是非常遗憾的是没有IE6模式。没有IE6的世界虽然是一个美好的愿望但是可惜的是我们生活在现实之中或许说生活在地狱中更确切。所以我还是不得不提下面的两个工具——IE多版本共存的解决方案——IETest er

微软网页开发调试利器S u p e r P rev iew附下载

文本模式

说起“文本模式”这个名词这又要回到渲染页面的3种模式了诡异模式Quirks mode也有翻译为兼容模式、怪异模式的 标准模式Standards mode 和几乎标准模式Almoststandards mode 。这是一个非常重要、但是很多人却比较模糊的概念。一两句话不太能说清楚这样说吧——“页面的不同渲染模式将直接影响页面的最终呈现效果”也就是说一个页面如果在这种模式下显示完美但是在另外一种模式下可能就显示的一塌糊涂。而决定页面模式的是页面的!DOCTYPE属性。

乖乖这玩意太绕人了还是直接上例子吧。最经典的就是对盒装模型的解释差异了。下面两个图是相同页面采用不同页面渲染模式的最终显示效果。

页面很简单只要一个div元素然后随便设置一点高度、宽度、 padding、 margin就可以了。核心代码如下——

<sty le ty pe="text/c ss">

#d ivTes t{backg round-color:red;padding:10px;marg in:10 px;w id t h:100 px;height:100px;

}

</sty le>

<div id="divTest">

<!--[if IE 7]>

浏览器是IE 7

<![endif]-->

<!--[if IE 8]>

浏览器是IE 8

<![endif]-->

</div>

IE8开发人员工具之文本模式

从图片中我们可以清楚的看到红色div块的大小和位置在不同的文本模式下发生了明显的变化。

关于文本模式的详细资料我建议你看这篇文章《Quirks mode、Almost standards mode、Standards mode》 。虽然是英文原版的资料也绝对值得翻着字典看完。还有这篇视频教程中我也有较为详细的介绍到 《“阿一we b标准学堂”第4课》

利用IE8开发人员工具调试JavaScript脚本

重头戏来了。很多朋友梦寐以求的功能呀——JavaScript脚本调试。一直摆脱不掉FireFo x就是因为Firebug实在太好用。虽然利用VS这样航母级的软件也能进行JavaScript脚本的调试。但是很多前台开发人员并不会为了一个JavaScript调试功能而去安装那种大家伙。所以对JavaScript的调试 IE的用户一直耿耿于怀。但是现在终于可以平息了。因为IE8开发人员工具终于也有了小巧却功能强大的JavaScript调试功能。

不多说直接上例子这里就举一个简单到弱智的例子吧。核心代码如下

<button>Button</button>

<script type="text/javascript">function test(){test 2();

}function test2(){var_obj=docu ment.getElementBy Id("d ivTest");var str=_obj. id;a lert(str);

}

</script>

还是让我们先看看脚本调试界面吧

利用IE8开发人员工具调试JavaScript脚本

图上的说明已经很清楚了下面就详细讲一下“控制台”、 “断点”、 “局部变量”、 “监视”、 “调

用堆栈”这些视图吧。

控制台

在控制台会显示脚本调试中的一些信息例如错误信息、警告信息一类的。

恩其实也可以当成是一个微型JavaScript运行环境。你可以在这里直接键入脚本并运行。如果一行不够的话可以切换到多行模式。输入完毕后点击“运行脚本”就可以看到运行结果了。

断点

是一个显示你设定的所有断点的列表。方便你统一管理统一删除、统一使用或者统一禁用。

局部变量

我非常喜欢的视图之一。可以详细的显示各个变量的所有方法、事件和属性。我最喜欢干的事情就是一个个的看下去看到不知道的就去查资料绝对是个学习JavaScript的好方法。例如下面途中这就发现了一些IE8特有的方法。

监视

我非常喜欢的视图之一。可以显示任意你需要的变量的方法、事件和属性。可以添加多个。整体来说和局部变量视图差不多只是可以更灵活的显示你需要的而已