前端调试--断点

由于做后台管理项目，平时也没什么技术点，基本不用调试。经常一个console就能定位出来，今天发现一个问题想用断点调试，才发现自己outl了。

下面1和2自己经常用，3和4是别人的总结，经验证可行。

转自：https://www.cnblogs.com/-wanglei/p/11189935.html

1.在浏览器开发工具找到对应源码，在script脚本节点里面的代码行断点。

• 首先在浏览器页面按F12打开开发工具，点击Sources选项，默认显示的是Page标签。然后找到需要调试的源码文件
• 如果是正常html页面，那么源码一般是在对应域名下面。如果是webpack处理的页面，并且开启了源码映射，源码就是在webpack://下面。可通过快捷键ctrl+ o打开搜索框输入文件名搜索源码
• 只要找到源码，在脚本代码显示区域左边的数字上添加断点即可，之后只要代码运行到断点处，开发工具就会进入调试状态
• 注意：有的数字行是灰色的，就是不可断点。有时候点击15行断点选中14行，这是因为浏览器真正执行的代码行不是你看到的那一行，可能是优化掉了或者经过某种转换。还有的情况是，添加某一行断点，会跳转到另一个页面并命中某一行,这个页面的背景色是黄色且文件名是VM开头。上述情况，大部分都是因为浏览器显示的源码版本，跟真正的源码文件不一致，只需要刷新一下页面，保证显示的源码是最新的即可。

2.在需要调试的地方加debugger关键字，代码运行到的时候会自动停下，进入调试模式。注意：调试结束后要删除