本文共 642 字，大约阅读时间需要 2 分钟。

无数次通过调试解决问题的经验告诉我，调试绝对是开发者最应该掌握的重要技能之一。

断点

调试的第一步就是打断点。断点的目的是，代码运行时在你想要开始调试的地方停下来。这个时候就可以查看当前上下文信息，比如全局变量、局部变量的值，函数的输入是否正确，请求的返回值是否正常等。通过此操作判断问题发生的地方，好对症下药。

断点案例分析

HTML文档中有一个文档加载顺序的问题，如下：

1. 首先在浏览器页面按F12打开开发者工具，点击Sources选项，默认显示的是Page标签，然后找到需要调试的源码文件；
2. 只要找到源码文件，在脚本代码显示区域左边的数字上添加断点即可，之后只要代码运行到断点处，开发者工具就会进入调试状态。
   

打好断点之后，现在只需要刷新一下页面，代码就会运行到断点处了，开发者工具就会进入调试状态。

1. F8，恢复执行并跳到下一个断点；
2. F10，恢复执行并跳到下一个运行栈，一般为子函数。

按下F10快捷键，script脚本节点里面的代码执行完毕，这个时候查看当前上下文信息，比如img全局变量，可以看到它的值是null。这说明断点处的代码根本就找不到id为img1的元素，也间接说明了HTML文档的加载是有顺序的。

转载地址：https://liayun.blog.csdn.net/article/details/85858286 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！