移动端开发-vconsole、Fidder4

一、网页调试

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

1、vue项目

（1）安装插件

npm install vconsole

（2）使用

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

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

2、普通的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
https://blog.csdn.net/wangzhimin0928/article/details/105350404