如何排错

一、进入相关页面

1.如何进入相关页面

• 1.看路由url
• 2.看页面的关键字，然后去代码里搜索
• 3.vue-dev-tools
• 4.chrome网络：先清除所有监听的网络请求，然后重新进入页面，通过点击新出现的接口的启动器，观察是那个页面

 

二、理清页面逻辑

1.代码的执行流程

• 1.一般来说，vue里流程都是watch（包含imediate）、然后created、然后mounted。。。
• 2.打断点，看函数调用栈，及单步调试；
• 3.consolelog走天下；
• 4.用纸一步一步记录下来，免得忘；

 

2.代码每一行的意义

• 1.自己理解
• 2.问同事

 

三、写出解决逻辑

在纸上写出解决问题的模型，然后编码；

 

 

 

 

 

 

 

 

 

 

 

 

6.浏览器debuuger调试

debugger调试，不用添加到监视，可以把鼠标放上去，就有数据

或者在左侧“监视中”通过this.$parent.page.size 的方式，来监视父组件的数据是否有变化；

然后可以在“跳转到下一个断点"和“跳过函数”、”进入函数（单步调试）“中选择如何执行代码；

7.vscode的debugger调试

https://juejin.cn/post/7071219293249077256

 

8.看url定位

现在都是前端路由时代，定位为题直接看url时候发生变化，找到那个可以变化到它的url。然后根据vue-router来判断是跳转到那个组件；

如果不变化，可能是dialog这样，那就不是组件页面了，可以使用方法一寻找；

 

 

 

 

 

 

 

 

 

 

 

 

 

如何解决问题？

将需要花一个树状图解决；

用纸和笔，安安静静写下自己的思路，安安静静花一个树状图，判断所有的情况；