1、清楚登录缓存,模拟初次登陆状态
桌面程序:
快捷键打开开发者工具:ctrl+shift+I
清楚下面数据,快捷键ctrl+R刷新页面
浏览器web程序:
鼠标长按浏览器刷新按钮,会出现清除数据的选项
2、确定前后台问题
(1)确认前台是否正确发出了请求
这可以和接口文档进行比对。如果请求有问题那么前台肯定是有问题的,没有问题继续下一步
(2)确认后台是否正确返回了结果
也是需要和接口文档进行比对,如果返回的结果有问题那么后台肯定是有问题的,没有问题那么就是前端的处理反馈逻辑有问题。
通过以上步骤,可以快速界定是前台还是后台出问题了,而且还可以进一步确定是前端的发送请求有问题还是处理反馈有问题。
3、前端问题调试
语法错误查找
(1)查找位置
(2)错误个数
(3)错误提示(下图为未登录)
(4)错误位置
逻辑错误查找
遇到逻辑错误就需要借助于断点、查看表达式调试方法定位错误了
设置断点:打开文件,单机代码行
运行前端代码
上图中的蓝色框就是标记即将要执行的代码,然后就可以像调试Java代码一样借助于工具进行调试
resume:继续执行后续代码,直到遇到下一个断点,快捷键是F8
step over:继续下一条,如果是函数调用也当做一条普通代码执行,即不查看函数内部执行过程,快捷键是F10。
step into:也是继续下一条,如果是函数调用会进入函数内部查看执行过程,快捷键是F11。
step out:跳出函数,直接到函数调用处,快捷键是Shift+F11
如果现在想查看当前代码中断点处函数调用(该函数在cookie.js文件中定义)的详细过程,可以使用F11,执行之后可以看到程序调到cookie.js中的getCookie函数内部了。