浏览器断点、代码段调试常见的四种快捷方式

---

前言

推荐几个前后端调试比较基础的Google常用的调试方式

---

一、四种常用的前端断点调试

1.普通断点–运行到位置就会断住

Sources进入到正在调试到文件，选中行号下次运行到此就会进入断点（白色的行号为不可打点）

2.条件断点–输入表达式条件为 true才会断住

举例：Sources进入执行文件，选择console.log()行号右键，选择Add c… 比如添加代码段或者变量 为true时向下执行

3.dom断点

选中元素右键，当子树、属性、节点移除时都会进入断点，适合调试dom变化

二、Network快速重发请求

每次前端填写完一大堆数据，后端说再调一次时那种绝望。Replay XHR可以拯救你 把请求参数和地址全部重新请求一次，再也不用再重填页面和搞校验了

三、Console创建临时数据调试

比如我们打印了一段数据，如果想重新修改一遍这个数据去做个向下的数据准备，是不是还要去修改代码。控制台在打印数据出右键选择Store… 浏览器会创建一个全局变量去copy一份名叫temp的对象，此时我们在这修改数据配合断点就不用频繁去修改代码一遍遍执行查看

四、Sources测试代码段

测试代码段，例如有个function需要测试或者做些练习
Sources下的snippets（如果没有就点后面的符号往后翻）新建 填写代码段 最后enter执行（run处）信息就会打印在console上了（sources页面里的console可以使用esc关闭或显示）

总结

持续更新一些常用的调试方式。vue浏览器调试工具：Vue.js devtools