一、IE浏览器javascript调试

总结:

正文:

    之前的博文,简单了解了一下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之前的样子。


   

    按下F5之后,代码直接从14行调至17行,即下一个debugger断点的地方,如下图。



F11 逐语句

   

    F11 逐语句,即每一行代码都走


    接着上面的断点,按下F11,继续调试


    按下F11 后,我们发现断点向下走了一行,走到了18行。

    F11 就是这个作用,一行行的走读代码,调试代码。


F10 逐过程


    F10 上面显示的是逐过程,但是本人在调试的时候,发现它的作用跟F11相同,都是一行行的走读代码,这里参考F11的作用就可以了。

    如果有朋友知道或了解到F10的其它作用,可以跟本人讲一下,定虚心学习。

Shift + F11 跳出


    Shift + F11 显示的是跳出调试,但是在操作过程中,发现它也只是跳到下一个debugger断点处,即跟F5的作用相似,这里参考F5即可。

    如果有朋友知道或了解到Shift + F11的其它作用,可以跟本人讲一下,定虚心学习。

 

断点行代码跟踪


    了解了调试的关键字,似乎还不够用啊。

    还不知道走到每一行代码,怎么继续看变量的具体内容。不急,接下来,我们就看断点到每一行的时候,我们能做哪些事情。

    接着F11 处的代码继续看吧

    选中变量aHref ,右键看到菜单

    这里太多的菜单项我们暂时不看了,我们关注添加监视(W) 菜单,因为它能让我们看到具体的变量内容,看到变量有哪些属性,有哪些方法。

 

    下图是点击添加监视后的视图。


    因为这一行代码还没走,变量还没有初始化,所以暂时变量值为undefined,类型为Undefined。

 

    继续按下F10,

   

    值变为了{…} ,类型变为了DispHTMLAnchorElement。

    {…} 表示该变量为对象类型或集合类型

    点击aHref 前面的小+ 号,展开aHref 变量,看看有哪些东东。


    最上面的是Events ,表示该对象上面有哪些可以绑定的事件。



    接下来是Methods ,表示该对象有哪些可以操作的方法。


    然后就是可供使用的属性信息了,在属性信息中,我们可以看到每个具体属性项的值,看到该项的值是否是我们想要的值,方便理解代码,调试代码。


    像accessKey 就是一个属性,对应值为空字符串。

    all 是个集合属性,值为{…},点击开后,就可以继续看all里面的每项具体属性值了。



    好了,这里的方法部分介绍完了。


无debugger断点方法

   

    如果我们拿到的是别人的代码,无法继续添加debugger断点,怎么办呢,直接找到该页面,添加断点就可以了。

    去掉上面代码中的debugger,启动调试后,在var hrefs = document.getElementsByName("clj");前面单击就可以了,单击后

    页面就出现了断点,就可以接续按照上面的方法调试了。



二、Firefox下javascript调试方法

    前面博文谈了一下IE浏览器下javascript的调试方法,今天没事干就把火狐浏览器(Firefox)下的javascript调试方法也看了一下,记录在此,希望对大家有所帮助。

    我们这次使用的代码页面为document获取对象博文中的按name属性获取对象的代码。

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


    用Firefox浏览器打开该页面,在浏览器的打开浏览器的工具栏,找到开发者选项按钮

点击进入,勾选开发者工具栏


完成后,看到浏览器最下方出现开发者选项的工具标识和关闭开发者工具栏的x标识


单击开发者选项的工具标识进入查看器页面


查看器页面有查看器,控制台,调试器,样式编辑器,性能,网络等tab页。

点击调试器tab页,刷新要调试的页面,调试器主窗口会出现要调试的代码


    点击点击暂停 按钮,点击后按钮状态改变,同时右边的三个调试步骤变为可操作状态,调试步骤的作用可参考IE浏览器javascript调试篇的讲解。同时,在代码行上面打断点。点击断点后,代码自动进入调试状态,取消断点,代码直接运行过去。


    打断点后,刷新页面,页面会停留在断点处,按下F10按钮,让代码继续,会看到后边变量窗口出现所有的变量信息。


    点击hrefs 变量,可以看到该集合属性的各对象,三个对象均为超链接,跟IE浏览器调试时看到的基本相同。


    点击第一个对象,对象展开后会出现对象属性信息等内容

    说到这里,Firefox浏览器的javascript调试基本就讲完了。


参考:

  1. IE浏览器javascript调试
  2. Firefox下javascript调试方法
  3. Firefox(火狐浏览器) 调试js设置
  4. 10分钟学会前端调试利器——FireBug
  5. 调试器
  6. 14招搞定JavaScript调试
  7. 前端调试入门
  8. 有哪些 JS 调试技巧?
  9. js调试技巧之活用浏览器F12
  10. chrome浏览器中 F12 功能的简单介绍