前端断点及使用

原文链接：https://www.cnblogs.com/sunny3158/p/17797552.html

一、打断点的方式
1.找到源码位置，添加断点
（1）寻找源码位置
①如果是正常html页面，那么源码一般是在对应域名下面。如果是webpack处理的页面，并且开启了源码映射，源码就是在webpack://下面。可通过快捷键ctrl+ o打开搜索框输入文件名搜索源码.

 ②使用console.log输出语句，点击控制台输出行右侧的链接，可以跳至相应的源码位置（个人觉得没必要，如果已经能在编辑器中找到源码，那么可以直接使用第二种添加断点的方式）

③使用浏览器控制台编辑代码并保存

在Filesystem添加文件夹到工作路径，选择之后会有提示，点击接受。它可以编辑之后ctrl+s真的保存到文件，这个可以当编辑器用了。

 

特殊情况：数字行是灰色的，就是不可断点；添加某一行断点，会跳转到另一个页面并命中某一行,这个页面的背景色是黄色且文件名是VM开头。
上述情况，大部分都是因为浏览器显示的源码版本，跟真正的源码文件不一致，只需要刷新一下页面，保证显示的源码是最新的即可。

2.直接书写断点
在编辑器中添加在想要的代码断点处，此方法不需要手动断点，但是麻烦的是可能你调试一次就不用再调试了，但是每次运行到那里都会停下，必须移除这个代码才行

debugger