前端断点及使用

前端断点及使用

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

一、打断点的方式

1.找到源码位置，添加断点

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

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

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

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

2.直接书写断点

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

debugger
1

二、使用

断点模式下光标移动到变量上会看见变量的值

待补充

原文链接：https://blog.csdn.net/qq_53152029/article/details/126656345