直接进入前端 debugger
主题。这些都适合新手。你一定能学会
先简单介绍几个按钮
红色框框内 ,从左往右依次是(我的通俗理解): 暂停/继续, 下一步, 进入函数, 退出函数。
下面我们开始打断点, 开始在你想要的地方调试, 这很简单,取消也只需再次点击:
那么当我们代码执行到此次就会立即停止变成这个样子(看到了吗前面说的按钮亮起了):
那么我们接下来开始 debugger
吧:
还记得第二个是 下一步 吧? 我们就这样一步一步走,边走边看输出,看和自己预想的逻辑有什么不同
你可以看到鼠标放上去,能看到当前变量的结果 ,点击 下一步 执行下面的一行代码。
接下来我们进行进行 第三个按钮的操作:
执行到下一行 我们遇到了 另一个函数 checkWx
, 我们想看到这个函数执行的细节。那就需要 进入下一个函数调用 了, 也就是第三个按钮。如果我们并不关心,也可直接 下一步 无需进入。
下面我们一步一步执行完出来,回调调用的函数, 同事注意小箭头位置,这里很好的记录了当前一些变量的值:
继续下一步:
很明显, 由于 result
为 false
我们登录失败,并弹出了消息。
到这里简单的 debugger
就结束了。