JavaScript断点调试高级教程

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

《我的博客地图》

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

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

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

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

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

https://github.com/webpack/webpack/issues/2145

https://www.jianshu.com/p/c0492554b33c

 

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]);