前不久跟大家介绍了小程序调试工具,进行就利用调试工具来和大家演示一下小程序真机调试教程,希望对大家有所帮助。

1.打开微信小程序开发工具-找到工具栏-点击远程调试按钮。点击远程调试

2.工具会自动将本地代码打包上传,上传之后,会出现一个二维码,管理员扫码进入,就可以跳出调试窗口,开始远程调试功能。

开始远程调试

3. 远程调试功能分为调试器视图和信息视图两种;

调试器视图:①让开发者通过console面板对代码进行调试;

console面板调试方法:点击console面板-切换到 VM Context 1,如图所示:

console面板

②在Sources 面板里对小程序源代码断点单步进行调试;

Sources 面板调试方法:点击Sources面板-选择weapp://路径-pages/index-index.js?[sm]-在红色代码框内手动插入debugger.如图所示:

Sources 面板

③在Storage面板里查看小程序Storage情况。

Storage面板调试方法:如图所示:

Storage面板

Storage面板调试方法

小程序Storage情况

3. 信息视图是用来看手机和服务器连接状态以及反馈错误信息等。

手机端展示:调试过程中会在手机端进行展示,如图所示:

信息视图