JS调试工具

1:暂停。快捷键F8或Ctrl+/。点击后会暂停到下一步要执行的代码处。

2:逐步跨方法执行 Step over next function call F10或Ctrl+'

可以在代码处任意打断点,右侧的Breakpoints里会显示该断点。此时刷新页面,断点就停在这里。然后点击上图中的2(就是点击下一步),上一行的代码执行完毕,鼠标可以悬停在变量上,可以查看信息。点击下一步下一步直到所有代码执行完,再点击上图中的1取消暂停,恢复执行。

用法2:在代码中引入的方法。这时,点击login会执行但是不会进入到这个方法里面,所以他是逐步的跨方法执行。

function(){

  login(user,id);

var a=100;

}

login(){

//一些代码。。。

}。

3:如果想进入到login方法里面,点击上图中的3 Step into next function call  F11或Ctrl+; 进入当前的方法。然后点击下一步下一步。如果这里有for循环,循环里的变量会不断的变化,如果想实时的监听变化。右键点击变量选择 Add to watch ,此时右侧的Watch会出现监听的变量。

for (var i=0;i<100;i++){

}

console.log(1);

这时for循环要100次,不用一直点点点,只需要在console处打一个断点,点击恢复执行,此时他发现在下方又有一个断点,再点击在断点处停止。

4:跳出当前方法。跳出login方法,代码在var a=100;处。

5:调试的时候,我们打了很多的断点,需要一直点击才能将所有断点打完,但是又不想删除断点,点击上图的5

原文地址:https://www.cnblogs.com/zuojiayi/p/7611919.html