IE浏览器javascript调试

来源：互联网发布：java protected关键字编辑：程序博客网时间：2024/05/17 09:27

之前的博文，简单了解了一下Dom对象，这一讲本想继续通过代码学习Dom，但是本人在写博文的过程中，写的代码经常出错，这里就先介绍一下javascript的调试方法吧。

<html><head><title>Demo</title></head><body><form id="form1" action="#"><a href="http://www.baidu.com/" name="clj" id="baidu">百度</a></br><a href="http://www.google.cn/" name="clj" id="google">谷歌</a></br><a href="http://www.gougou.com/" name="clj" id="gougou">狗狗</a></br></form><script><!--getElementsByName-->var hrefs = document.getElementsByName("clj");for (var i=0; i < hrefs.length; i++) {var aHref = hrefs[i];if (aHref.href.search("http://www.baidu.com") > -1) {alert(aHref.href);break;}}</script></body></html>

上面是这次学习主要的代码了，我们现在进入到javascript的调试状态去看看。

怎么进入javascript的调试状态呢，各浏览器的实现是不同的，像火狐浏览器有自己的firebug，chrome浏览器本身就自带了调试。

这里讲一下IE浏览器的调试，毕竟当前浏览器市场IE还是占了很大的份额的。

想在IE浏览器中调试代码，可以像java代码一样，给代码打断点。

Javascript中断点的方式为 debugger 关键字，在需要调试的地方添加上debugger，再开启javascript的调试，就可以进入调试模式了。

接下来，我们演示一下javascript的具体调试。

首先，将上面的代码进行些许改造，在var hrefs = document.getElementsByName("clj"); 上面添加一行debugger;

<script><!--getElementsByName-->debugger;var hrefs = document.getElementsByName("clj");for (var i=0; i < hrefs.length; i++) {var aHref = hrefs[i];if (aHref.href.search("http://www.baidu.com") > -1) {alert(aHref.href);break;}}</script>

然后打开该页面

其次，按下F12，进入开发者模式

开发者模式下，点击脚本页签，点击启动调试按钮，进入调试模式

进入调试状态后，debugger所在的行会有一个箭头指向，意味着调试从这里开始，就跟java代码里面的breakpoint 一样。

最后按下F5，刷新一下页面，开始调试。

调试快捷键

调试的时候，有几个快捷键简单介绍一下。

F5 继续

F5继续调试，跳到下一个debugger

再改造一下上面的代码

<script><!--getElementsByName-->debugger;var hrefs = document.getElementsByName("clj");for (var i=0; i < hrefs.length; i++) {debugger;var aHref = hrefs[i];if (aHref.href.search("http://www.baidu.com") > -1) {alert(aHref.href);break;}}</script>

开始调试，下图是刚启动调试的代码样子，即按F5之前的样子。