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键。开发人员调试工具可以调试CSSHT 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特有的方法。
监视
我非常喜欢的视图之一。可以显示任意你需要的变量的方法、事件和属性。可以添加多个。整体来说和局部变量视图差不多只是可以更灵活的显示你需要的而已
