JavaScript断点调试高级教程

￡神魔★判官ぃ 2022-06-11 04:06 351阅读 0赞

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

[《我的博客地图》][Link 1]

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

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

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

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

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

[https://github.com/webpack/webpack/issues/2145][https_github.com_webpack_webpack_issues_2145]

[https://www.jianshu.com/p/c0492554b33c][https_www.jianshu.com_p_c0492554b33c]

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

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

![20170729220917665][]

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

一、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）页面，可启动断点调试，如下图：

![20170729222115590][]

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

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

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

3、设置程序断点

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

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

![20170729225935468][]

进入断点模式之后，直接点击一号按钮时，程序会一次性执行多步，并在断点处停止，然后可以采用第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]);

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[https_github.com_webpack_webpack_issues_2145]: https://github.com/webpack/webpack/issues/2145
[https_www.jianshu.com_p_c0492554b33c]: https://www.jianshu.com/p/c0492554b33c
[20170729220917665]: /images/20220611/35dd778ab1054cdd8cf20fe2b95765d2.png
[20170729222115590]: /images/20220611/fe28fed6134e41eca66b791448229e2f.png
[20170729225935468]: /images/20220611/6ada06e49d8e4e8688c05ba264146727.png