云笔记项目-网页端debug功能学习
在做云笔记项目的过程中,除了服务端在eclipse中debug调试代码外,有时候需要在浏览器端也需要进行debug调试,刘老师举了一个冒泡排序算法的dubug例子,进行了讲解。
首先上浏览器端测试代码:
//实行冒泡排序 function demo(){ var ary=[1,5,10,3,7,99,2,8,9]; sort(ary); console.log(ary); } //冒泡排序具体实现 function sort(ary){ for(var i=0;i<ary.length-1;i++){//比较次数 for(var j=0;j<ary.length-1-i;j++){//两两具体比较大小 if(ary[j]>ary[j+1]){//数字越大往下沉 var t=ary[j]; ary[j]=ary[j+1]; ary[j+1]=t; } } } }
浏览器终端执行效果如图,发现执行没问题,代码正确。如果想看代码执行过程中,保存在内存中变量的变化情况,需要使用浏览器提供的debug功能。
以下是执行debug的页面,点击Sources→点击对应页面下的script脚本notebook.js→出现js脚本,可以在需要查看变量变化情况的地方打断点。
点击执行后,进入如下页面,local就是保存在内存中变量的值,可以执行的过程中查看变化情况,刚开始发现ary为undefined,代表还没将数组赋值给数组变量。右上角有好几个图标,从左到右分别为:
(1) resume script execution :暂停/恢复脚本执行(程序执行到下一断点停止)
(2)step over next function call:执行到下一步的函数调用(跳到下一行)
(3)step into next function call:进入当前函数
(4) step out of current function:跳出当前函数
(5) step: ?
(6) Deactive/Active all breakpoints:关闭/开启所有断点(不会取消)
(7) Pause on exceptions:异常情况自动断点设置
还有几个暂时没讲述,暂时不做演示,后续完善。
(1)在点击第一个图标resume script execution后,一步一步的按照设定的断点来执行出结果,右侧local区域的值也持续变化。
local中打断点处变量的值持续变化,展示排序的整个过程。
(2)在点击第二个图标step over next function call后,如果执行到断点处,会继续执行断点之后的代码,一步步的执行,直到碰到新的断点,如本例中当执行到断点var t=ary[j]处时,点击第二个图标会继续执行完后面的ary[j]=ary[j+1]和ary[j+1]=t再跳到下一个断点。
(3)在先点击第一个图标执行到sort(ary)后,再点击第二个图标step into next function call后,会进入sort(ary)函数的方法体,就算方法体没有打断点也将进入执行。
(4)与上一步相反,当点击了step out of current function后,将从sort(ary)方法体里面跳出,直接进入到下一个断点console.log(ary)准备执行。
总结:浏览器在必要时也可以打断点,可以查看变量值变化的全过程。