前端问题定位方式归纳

阅读控制台报错信息

背景：控制台输出错误时

搞懂控制台报错内容，然后根据报错内容去定位

控制台输出

背景：

1. 需要查看某一行代码的变量时（非高频触发）
2. 缩小排查范围

console.log()在出现问题区域打印相关变量，看执行结果是否和预期一致

Vue devTools

背景：

1. Vue组件相关的问题
2. 组件数据状态：data、computed等（属性）

定位到组件某个区域，看组件中存储的值以及组件间传递的值，还有一些控制变量

debugger

背景：

1. 函数执行过程
2. 语句执行结果

在代码中某行输入debugger后执行，然后在浏览器看源码执行步骤，也可以直接在浏览器源码左侧打断点

页面上直接打断点来调试

如果以上方式都没法找出问题所在，那么这时可能就需要考虑换一种实现方式~