跟老姚学前端,课程体系更完善,10%基础 + 90%实战演练,快人一步学编程

扫一扫浏览

小程序•小故事(15)——真机定位问题技巧

未结贴
0 4810
江南坦克站长未认证 2018-06-27 20:45:59
收藏

开发者在开发小程序的时候可能会碰到一些这样的问题:

问题1  开发者工具上看效果没问题,但是在真机上测试不行?

问题2  有用户遇到小程序功能无法使用的问题,但无法快速定位解决?

今天我们的小故事与大家分享一些真机定位的技巧,可以解决上面两个问题。

1

vConsole开发利器和远程调试功能

针对问题1,我们提供了 vConsole 开发利器和远程调试功能,可以协助开发者在定位真机上的问题。

vConsole 的有四个Tab面板,可以先看下 Log 面板,看是否有异常信息,异常类型 thirdScriptError 是框架捕捉到的开发者的代码执行的异常,可以优先处理异常信息看是否可以解决问题。Log 面板可以看到异常出现的文件和行数。 

除了异常日志,开发者还可以通过 console.log 接口在一些关键执行路径上打日志来定位问题,这些日志会呈现在 Log 面板上。

vConsole 默认是不开启的,可以通过下面2个方法来开启:

 1   开发版和体验版可以点击小程序页面右上角的...按钮打开的菜单项“打开调试”来开启 vConsole。

 2  正式版没有“打开调试”的菜单项,可以先通过开发版和体验版来开启 vConsole,然后再打开正式版。或者可以预埋一个隐藏操作,比如连续点击某个 Button 多次,然后调用 API 接口 wx.setEnableDebug 来打开。

vConsole 虽然强大,但在手机上查看大量的日志信息不方便,此外,vConsole 没有断点调试、无法修改样式,定位复杂问题需要花费比较多的时间。

小程序的业务逻辑运行在 AppService 层,页面渲染在 WebView 运行,并通过微信客户端通信,因此,我们想到了可以让 AppService 运行在开发者工具,页面渲染还是在手机 WebView,两者通过网络来通信,这样借助开发者工具的调试能力,就可以实现远程调试功能

远程调试窗口通过手机客户端扫描开发者工具上生成的二维码来打开,无需像普通手机 H5 页面调试一样,需要在手机端进行一些设置。

打开的远程调试界面和开发者工具的模拟器的调试界面很像,需要注意的是,要在 Console 里对小程序进行调试,需要将调试的上下文切换到 VM Context 1 。

更多的远程调试的使用方法请参考使用文档

2

意见反馈能力

对于问题2,小程序的使用反馈来自用户投诉,这种情况用户无法联系到开发者。我们遇见过有小程序功能出现问题,用户无法使用,但投诉无门的情况,而这些问题,开发者也没有途径去收集以及处理,这就导致了小程序服务质量下降,用户流失。

为此,我们开发了“意见反馈”功能,当出现问题时,开发者可以引导用户使用“意见反馈”进行反馈,并上传日志来辅助开发者定位问题。操作过程如下:

引导用户进入小程序帐号详情页面,具体可以在小程序界面点击右上角...按钮,选择关于菜单。接着在帐号详情页面点击右上角...按钮,选择意见反馈菜单进入页面。页面可以上传图片和日志,建议用户上传异常情况的截图,以及勾选允许开发者使用小程序日志选项上传日志,反馈信息越详细,越有助于定位问题。

如果觉得上面的操作步骤太麻烦,开发者可以通过在页面 WXML 添加下面的按钮,用户点击按钮可以直接打开“意见反馈”页面。

开发者需要定时处理用户的反馈,这样才能保证小程序的质量。开发者可以登录小程序管理后台,进入左侧菜单客服反馈,就可以看到用户的反馈内容以及下载日志来辅助定位问题。

为了保证日志信息足够详细,开发者需要用下面的接口在代码的关键执行路径上写日志。

wx.getLogManager 接口的更详细使用请参考文档

希望通过这些小技巧,可以帮助大家顺畅地开发小程序。



历史文章回顾 >>>

第十四期回顾:小程序•小故事(14)——腾讯视频插件

第十三期回顾:小程序•小故事(13)——腾讯地图插件

第十二期回顾:小程序•小故事(12)——微信同声传译插件

第十一期回顾:小程序•小故事(11)——低功耗蓝牙功能

第十期回顾:小程序•小故事(10)——群聊功能

第九期回顾:小程序•小故事(9)——音视频组件

第八期回顾:小程序•小故事(8)——自定义组件

第七期回顾:小程序•小故事(7)——小程序音频能力介绍

第六期回顾:小程序•小故事(6)——微信登录能力优化

第五期回顾:小程序•小故事(5)——小程序插件

第四期回顾:小程序•小故事(4)——获取用户信息

第三期回顾:小程序•小故事(3)——更新机制

第二期回顾:小程序•小故事(2)——代码片段

第一期回顾:小程序•小故事(1)——分包加载

如果大家有想了解的小程序相关能力的故事,欢迎在评论区留言,我们后续会考虑将这些能力背后的故事分期分享给大家。

最近热帖 HOT TOPIC
【全套视频】thinkphp5视频教程 87279
父元素flex之后,子元素高度自适应问题 10990
一张纸的厚度是0.01毫米,则该纸对折30次后是多厚(据说超过珠穆朗玛峰的高度)php实现 10165
thinkphp5隐藏默认模块的一些问题 9537
api接口文档插件easydoc的基本用法,快速搞定接口文档 9490
omnicore rpc api中文手册【usdt】 9320
PHP如何判断字符串是否为json格式 9235
教你如果处理高并发数据不同步的问题php篇 9076
关于thinkphp5.0.x getshell漏洞的说明 8893
使用宝塔linux面板创建FTP无法连接的解决办法(阿里云或腾讯云) 8775
月度热议HOT COMMENTS
【全套视频】thinkphp5视频教程 71
tpframe 后续版本你希望有的功能是什么(分享贴) 12
权限那里怎么一登录别的账号就报错啊 9
关于tpframe的一点话题 6
cms插件在分类排序的时候JSON错误 6
基于tpframe v3.x 的微信公众号插件已批量上线 5
tpframe插件tcms插件v2.2已发布上线,欢迎下载使用 5
tpframe6.0马上就要跟大家见面了,一次全新的升级 5
透析thinkphp5升级版开发框架tpframe 3
新增的管理员没有权限操作CMS模块。 3
爆料早知道: