前言
前段时间，我做了一个移动端拍照扫描名片后新建客户表单的需求。但是大家也知道，涉及拍照功能的需求咱基本只能在手机上面的测试环境下进行调试。今天我就把做这个需求遇到问题的调试方法记录下
以下方法适用于在本地环境不方便测试的功能：
alert
使用场景
不知道方法执行到哪一步/不知道有没有获取到参数/查看报错原因
由于这个需求的第一解决方案是传递base64格式图片链接给后端，所以这里使用了两个函数把图片转码，但是我发现传递给后端时报错了（这里也用alert输出了错误信息）
.catch(e => {
alert('出错了：' + Json.stringify(e))
})
注：alert输出参数时要把参数Json.stringify（） 之后才能取到值
这里我输出的错误信息里面有状态码，问了下后端说的图片链接没传过来
于是我首先想到的是调用拍照api成功后是否返回参数：
onSuccess: function (result) {
that.uploadImage = result[0]
alert('图片链接：' + Json.stringify(result[0]))
},
发现图片链接是有返回的，那么就是转码图片的方法有问题了：
// 转化为base64
image2Base64 (img) {
alert('执行了image2Base64方法’)
var canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height)
return canvas.toDataURL('image/jpeg')
},
// 获得base64格式
getImgBase64 (url) {
alert('执行了getImageBase64方法’)
let that = this
let base64 = ''
let img = new Image()
img.src = url
img.crossOrigin = ''
if (img.complete) {
base64 = that.image2Base64(img)
console.log('8888888', encodeURIComponent(base64))
}
},
发现没有执行image2Base64方法，也就是说if里面是不成立的
这个时候我复制了这段代码到别的页面，然后给了一个固定的图片URL（就是之前alert出来的那个，把它记录下来了）
果然，这个方法是有问题的，钉钉的api返回的照片用这个方法存在跨域问题（总之后来就用其他方法把数据传过去了）
lightProxy抓包
使用场景
想看请求接口返回字段/传递的参数
接上文，进入新建表单页面时，发现我需要的一个文本框没有相应值，不知道后端有没有传递相应值给我，这个时候就要用到lightProxy了
首先去下载一个lightProxy
点击手机代理，扫码下载证书，然后按照你的页面信息配置一下你的WiFi代理
然后当你的手机和电脑在一个局域网时，你操作你的手机，就能得到你请求的接口以及接口信息了，如图：
当然，lightProxy还有很多其他功能，这个大家可以去官网看下教程
mock模拟流程
使用场景
得到返回参数之后的本地调试
接上文，当我拿到后端返回的字段列表之后，我发现后端已经返回了我想要的数据但是前端没有渲染出来，这个时候就可以用mock模拟请求接口了
使用mock的方法有很多种，包括lightProxy也是有mock模拟的功能的，我这里是使用了ypai里面的mock来模拟扫描名片已经成功后返回了参数来新建表单的流程
如图，在添加的期望里面的Body中加入复制的后端返回字段，并且启用那个接口的mock（之后记得重启下项目）
然后在我们请求这个接口的时候，就能返回固定的数据来新建表单页面了并且可以在本地调试了（这个时候各种本地调试工具啊debugger什么的就能用上了）
至于mock的使用方法，每个公司的代码可能都不一样，可以看看自己公司的config文件中有没有加入mock调试的代码
如果没有的话，可以搜索下其他方法来进行mock哦。
