小程序线上调试优化

前言：

众所周知，小程序开发有开发者工具，但是调试不可以只用开发者工具，因为很多问题是开发者工具无法正常复现的，本地联调还可以真机调试，但是发布测试版本后开始调试就成了一个问题。这里来说说目前支持方法，以及我们可以做哪些优化，让他更好的方便我们定位问题。

1、开发版本之真机调试

打开开发者工具–》真机调试–》二维码真机调试

2、体验版本与开发版本均支持打开的默认调试工具

小程序右上角的三个点–》打开弹框–》下面的滑动到最右边找到开发调试

点击开发调试，需要重新进入小程序，进入以后，可以看到

点击 vConsole,可以看到console.log的信息，注意，这里没办法像我们的开发者工具或者pc一样，打开所有的工具，这里只有小程序默认支持的 Log(console.log)， WXML(界面元素)等等

3、针对当前的工具，对我们的具体功能做优化，让可以调试接口信息

效果：注意，需要点 Log/Log

1、请求接口前

2、请求成功后：

3、接口失败后：

具体实现代码：

1、请求接口前的打印

console.log('%c 开始请求接口！！！ ', 'background:#409EFF;color:#fff;border-radius: 3px;font-size:1.2em;')console.log('%c 请求地址：', 'color:blue');console.log(this.baseURL + url);if(data){   console.log('%c 请求参数：', 'color:blue');   console.log(data);}//请求小程序接口wx.request({    url: this.baseURL + url,    data,    method,    ...

2、请求成功以后的打印

wx.request({    url: this.baseURL + url,    data,    method,    success:async (res) => {                //now_url 是你的接口地址，我这里是处理地址，更方便看               console.log('%c '+now_url+' 数据：', 'background:#41b883;color:#fff;border-radius: 3px;font-size:1.2em;');       console.log(res);            }})

3、失败以后的打印，根据你的方法看具体放哪里

console.log('%c '+now_url+' 失败：', 'background:#F56C6C;color:#fff;border-radius: 3px;font-size:1.2em;');console.log('%c respCode：', 'color:red');console.log(res.data.respHeader.respCode);console.log('%c error：', 'color:red');console.log(res.data);

到这里就成功了！