移动端开发快速定位问题

一、网页调试

前情提要：因为手机或者平板之类的客户端软件并没有控制台，前端开发想看log日志比较麻烦，如果一直弹窗alert方法不方便调试，而用vConsoles可以快速定位到问题。下面列出vue项目和普通html网页使用该插件的方法

vue项目

1. 安装插件
   npm install vconsole

2. 使用
   在main.js里引用
   import Vconsole from "vconsole"
   new Vconsole();

这样页面上就会出现一个绿色的vConsole按钮，可以查看打印的console信息，页面的dom结构，接口的请求返回等等，非常方便移动端页面调试

普通的html网页或者jsp页面

1. 引用
   
2. 使用
   在需要使用的页面声明
   window.vConsole = new window.VConsole({
   defaultPlugins: ['system', 'network', 'element', 'storage'], // 可以在此设定要默认加载的面板
   maxLogNumber: 1000,
   onReady: function () {

},
onClearLog: function () {
console.log('on clearLog')
},
})

这个是目前移动端项目中常用的高度方法，欢迎补充

二、抓包调试

前情提要：像已经上线的项目，如果突然出现了问题，又不好随便修改代码，可以用抓包来查一些问题，类似接口返回值之类的，能快速定位到问题在哪里

抓包工具：Fidder4
安装配置方法参考链接：
https://www.cnblogs.com/woaixuexi9999/p/9247705.html