JavaScript断点调试高级教程
2017-07-29 21:35
423 查看
最近更新时间:2017年7月29日23:31:50
作为一名工程师,只有掌握最基本和最基础的技能,未来才有可能向一定的高度发展,好比万丈高楼平地,地基是支撑它的核心和关键。人,生来平等,生来一无所有,所有技术和能力都是通过后天的学习来掌握,只要足够用心和细心,一定会成为所在领域的技术专家。
程序的奇妙所在是它的逻辑性很强,再复杂的程序,都是按照一步一步执行的,因此,在程序出错时,断点调试的技能尤为重要,chrome浏览器的开发者工具实用且强大,是作为前端工程师进行程序断点调试的基础工具。
本文结合JavaScript语言实现的数组 排列算法,进行深度详解断点调试步骤和技巧:
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、程序源码
作为一名工程师,只有掌握最基本和最基础的技能,未来才有可能向一定的高度发展,好比万丈高楼平地,地基是支撑它的核心和关键。人,生来平等,生来一无所有,所有技术和能力都是通过后天的学习来掌握,只要足够用心和细心,一定会成为所在领域的技术专家。
程序的奇妙所在是它的逻辑性很强,再复杂的程序,都是按照一步一步执行的,因此,在程序出错时,断点调试的技能尤为重要,chrome浏览器的开发者工具实用且强大,是作为前端工程师进行程序断点调试的基础工具。
本文结合JavaScript语言实现的数组 排列算法,进行深度详解断点调试步骤和技巧:
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]);
相关文章推荐
- [Android Studio 权威教程]断点调试和高级调试
- [Android Studio 权威教程]断点调试和高级调试
- [Android Studio 权威教程]断点调试和高级调试
- [Android Studio 权威教程]断点调试和高级调试
- [Android Studio 权威教程]断点调试和高级调试
- [Android Studio 权威教程]断点调试和高级调试
- [Android Studio 权威教程]断点调试和高级调试
- [Android Studio 权威教程]断点调试和高级调试
- [Android Studio 权威教程]断点调试和高级调试
- [Android Studio 权威教程]断点调试和高级调试
- Android Studio 权威教程断点调试和高级调试
- [Android Studio 权威教程]断点调试和高级调试
- [Android Studio 权威教程]断点调试和高级调试
- [Android Studio 权威教程]断点调试和高级调试
- android NDK开发在本地C/C++源码中设置断点单步调试具体教程
- [转]翻译:有点高级的JavaScript面向对象特征指南快速教程
- PyCharm 教程(五)断点 调试
- Android Studio 断点调试和高级调试
- 谷歌浏览器javascript调试教程
- Javascript高级教程-第三课