快捷搜索:

JavaScript断点调试高级教程

最近更新时间:2017年7月29日23:31:50

作为一名工程师,只有掌握最基本和最基础的技能,未来才有可能向一定的高度发展,好比万丈高楼平地,地基是支撑它的核心和关键。人,生来平等,生来一无所有,所有技术和能力都是通过后天的学习来掌握,只要足够用心和细心,一定会成为所在领域的技术专家。

程序的奇妙所在是它的逻辑性很强,再复杂的程序,都是按照一步一步执行的,因此,在程序出错时,断点调试的技能尤为重要,chrome浏览器的开发者工具实用且强大,是作为前端工程师进行程序断点调试的基础工具。

本文结合JavaScript语言实现的数组 排列算法,进行深度详解断点调试步骤和技巧:

0、webpack打包后的sourcemap无法打上断点的原因

可以把这个配置devtool: "source-map",改成这个配置:devtool: "#inline-eval-cheap-source-map"

1、进入chrome浏览器的开发者工具模式

打开chrome浏览器,F12打开开发者工具,并切换选项卡到Sources上,如下图:

在程序调试的面板上总共有七个工具:

一、Pause/Resume script execution;暂停/继续脚本执行

二、Step over next function call;跳过子函数(次态函数)执行(只在主函数内一步一步执行,不进入子函数内部)

三、Step into next function call;进入子函数(次态函数)执行(在主函数内部一步一步执行,如果遇到子函数,会跳转到子函数内部一步一步执行)

四、Step out of current function;跳出当前函数

五、Deactivate breakpoints;屏蔽断点

六、Pause on exceptions;在程序异常处停止执行

七、Capture async stack traces;跟踪捕获异步堆栈

2、让程序一步一步执行

在上一个界面中,点击一号按钮,Pause script execution,然后刷新(F5)页面,可启动断点调试,如下图:

浏览器左侧出现了一个小的快捷工具,这个工具上的两个按钮的功能对应右边的一号和二号按钮的功能,可忽略,此时点击三号按钮 Step into next function call,可以让程序一步一步的执行,直到这段JS代码执行完毕。

高级技巧:可以看出,这套程序的主函数是arrange(),主函数内部嵌套了两个子函数swap()和show(),因此,在连续点击三号按钮时,左侧代码区的高亮行(当前的执行行)会在主函数内部一步一步执行,如果遇到子函数,会跳转到子函数内部一步一步执行;此时注意:①当高亮行在子函数swap()或show()内部时,停止点击三号按钮,连续点击二号按钮,程序会执行完当前子函数之后跳转到主函数,并且只在主函数内一步一步执行,不会再进入子函数内部,遇到子函数时直接一次执行完子函数内部的全部步骤;②当高亮行在主函数arrange()内部时,停止点击三号按钮,连续点击二号按钮,程序会只在主函数内一步一步执行,不会进入子函数内部,遇到子函数时直接一次执行完子函数内部的全部步骤;

备注:当刚启动断点调试时,直接点击一号按钮时,程序会一次性执行完;直接点击二号按钮时,程序被解析为,主函数是script标签内的全部内容,arrange()、swap()和show()三个函数都是子函数,因此,连续点击二号按钮的结果是,程序高亮行只一步一步执行script标签内的语句,而不会进入三个子函数内部;

3、设置程序断点

设置断点的目的,只观察我们关心的关键步骤,其它步骤一次全部执行;

方法:启动断点调试之后,在需要设置断点的左侧行号上单击就可以添加和取消断点,如下图:

进入断点模式之后,直接点击一号按钮时,程序会一次性执行多步,并在断点处停止,然后可以采用第2步的模式,进行单步运行、主函数运行 和 主函数加子函数运行。

4、其它按钮的功能

四号到七号按钮的功能,可以按照意思理解进行相应的使用,相对比较简单,不再赘述。

5、程序源码

swap(arr,i,j) {
	if(i!=j) {
		var temp=arr[i];
		arr[i]=arr[j];
		arr[j]=temp;
	}
}
var count=0;
function show(arr) {
	document.write("P<sub>"+ ++count +"</sub>: "+arr+"<br />");
}
function arrange(arr) {
	(function fn(n) { //为第n个位置选择元素
		for(var i=n;i<arr.length;i++) {
			swap(arr,i,n);
			if(n+1<arr.length-1) //判断数组中剩余的待全排列的元素是否大于1个
				fn(n+1); //从第n+1个下标进行全排列
			else
				show(arr); //显示一组结果
			swap(arr,i,n);
		}
	})(0);
}
arrang([1,2,3,4]);
经验分享 程序员 微信小程序 职场和发展