学会在Chrome为Javascript代码进行调试

最近在做网页相关的东西,对整个环境还比较陌生,在这里总结一些基本知识,最基础的一个就是学会在Chrome为Javascript代码打断点

我们为什么需要给代码调试?

如果一份代码你写好了,他能够满足以下几个条件
1.能够正常的运行,程序不崩溃
2.代码是按照你的意思实现各种功能(你控制一个机器人往左,他不能往右)
这时候是不用打断点的.但是现实世界往往不是一番风顺的。

运行起来的代码,突然崩溃了。或者你运行的代码不是按你想象功能实现的(你让他往东,他往西),你想确定问题出在哪,才好想解决办法。

这要分情况

第一种情况是,程序直接崩溃了,而且崩溃的信息直接给你提供了是哪有问题?
那你直接按提示去解决就行了

第二种是你的代码实现的功能不是按你想象的运行的,但是你很清楚知道问题出现在哪,那你在出现问题的地方直接修改代码逻辑就行了

这样看起来也不要打断点啊,那什么时候该打断点呢?那就是找到我们不易发现的那些问题所在位置
为了发现那些不易察觉的问题出现在哪?
我们会用三个方法打断点

第一种方法,通过打一个断点定位大概位置

在该问题你猜测大概出现范围,最好是缩小在一个方法之内打一个断点,然后通过在界面上重现问题出现的步骤来确定执行代码的过程中是否在该断点处停留。如果自始自终都没有在该处停留,说明问题就不是这里.或者说你想实现的这段代码压根就没有执行。

如果在断点出停留,在结合变量的值来判断问题出现在哪里（一般编辑器,浏览器都可以让你在断点之前的变量前停留一会就可以来查看变量的值）

在Chorme实现

1.在哪打断点右键-> 检查 —— 打开Sources → 打开你要调试的js代码文件 → 在行号上单击下

2.如果经过这里,

3.如果没有直接就跳过该断点

如果通过第一种方法找不到问题所在,你就可以从该断点出发往后执行依次逐句排查问题的所在

在Chorme实现

这时候你直接点击下面右边的按钮就行了

同样你可以通过触摸来观察变量的值,以辅助你的判断

你可以使用逐句排查的方法在多个断点之间进行一步一步排查,但是有时候你知道问题不在某两个断点区间之内了,想直接跳到下一个区间。你可以直接使用逐过程按钮直接跳到下一个断点处开始排查

在Chorme实现

确定好想要跳过的区间后,点击逐过程按钮(左边的按钮)直接跳到下一个断点

调试的核心逻辑就是这些,只不过每个编辑器,浏览器所用的工具不同罢了。

参考文章:[js断点调试心得 - 沐清风blog - 博客园](https://www.cnblogs.com/mqfblog/p/5397282.html)