小程序真机定位问题技巧

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

 

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

 

以下分享一真机定位的技巧,可以解决上问题。

 

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

 

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

 

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

 

小程序真机定位问题技巧_第1张图片

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

小程序真机定位问题技巧_第2张图片

 

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

 

小程序真机定位问题技巧_第3张图片

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

你可能感兴趣的:(小程序,米筷网,小程序,米筷网)