前端断点及使用
原文链接:https://www.cnblogs.com/sunny3158/p/17797552.html
一、打断点的方式
1.找到源码位置,添加断点
(1)寻找源码位置
①如果是正常html页面,那么源码一般是在对应域名下面。如果是webpack处理的页面,并且开启了源码映射,源码就是在webpack://下面。可通过快捷键ctrl+ o打开搜索框输入文件名搜索源码.
②使用console.log输出语句,点击控制台输出行右侧的链接,可以跳至相应的源码位置(个人觉得没必要,如果已经能在编辑器中找到源码,那么可以直接使用第二种添加断点的方式)
③使用浏览器控制台编辑代码并保存
在Filesystem添加文件夹到工作路径,选择之后会有提示,点击接受。它可以编辑之后ctrl+s真的保存到文件,这个可以当编辑器用了。
特殊情况:数字行是灰色的,就是不可断点;添加某一行断点,会跳转到另一个页面并命中某一行,这个页面的背景色是黄色且文件名是VM开头。
上述情况,大部分都是因为浏览器显示的源码版本,跟真正的源码文件不一致,只需要刷新一下页面,保证显示的源码是最新的即可。
2.直接书写断点
在编辑器中添加在想要的代码断点处,此方法不需要手动断点,但是麻烦的是可能你调试一次就不用再调试了,但是每次运行到那里都会停下,必须移除这个代码才行
debugger