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个下标进行全排列elseshow(arr); //显示一组结果swap(arr,i,n);}})(0);
}
arrang([1,2,3,4]);

JavaScript断点调试高级教程相关推荐

JavaScript 断点调试技巧
大家好,我是若川.最近组织了源码共度活动:1个月,200+人,一起读了4周源码,参与的小伙伴都表示收获很大.如果感兴趣可以点击链接扫码加我微信 ruochuan12.之前推荐过很多次调试文章,说明调试 ...
不依赖浏览器控制台的JavaScript断点调试方法
随着浏览器的逐渐强大,绝大多数情况下的代码调试都是可以通过浏览器自带的一些调试工具进行解决.然而对于一些特殊情况仍然无法享受到浏览器的强大调试能力,比如QQ客户端内嵌web的调试(虽然说QQ目前已经 ...
Java断点调试 idea断点调试 debug教程
IDEA断点调试 Java程序断点调试文章目录 IDEA断点调试 Java程序断点调试前言一.什么情况下需要debug 二.使用idea如何进行debug 三.假设案例分别进行debug教程 1 ...
javascript断点调试
一.方法1 1.断点文件位置打开chrome,找到Sources,在一堆的文件夹里面找到你要调试的js文件,打开它: 下面是html前端展示: 2.打断点当你运行代码的时候,例如:操作搜索按钮点击 ...
python断点调试从哪里看数据_Python Pdb 断点调试 - 简明教程
Pdp 调试 pdb是一种在命令行下面调试的古老的方法,虽然没有现代IDE集成的debug功能强大,但是简单通用,大部分语言都支持. main.py 1 for x in range(10): 2 p ...
IDEA 断点调试高级玩法｜debug高手必看！
文章目录条件表达式 //条件表达式public static void main(String[] args) {for (int i = 0; i < 10; i++) {System.ou ...
javascript断点调试方法
http://www.blogguy.cn/show-728-1.html
JavaScript断点调试与console.log(..)输出不一致
此情况多出现在对象赋值前后进行console.log(-) 打印结果会随机
as的断点调试与高级断点调试
<div class="markdown_views"><blockquote> 有人说Android 的调试是最坑的,那我只能说是你不会用而已,我可以说A ...
Chrome 中的 JavaScript 断点设置和调试技巧
你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用 ...

JavaScript断点调试高级教程

JavaScript断点调试高级教程相关推荐

最新文章

热门文章