虎超官网 | 联盟商圈 | 新闻资讯 | 虎超学院

微信小程序工具 程序调试的三大主要功能区


程序调试主要有三大功能区:模拟器、调试工具和小程序操作区

 

模拟器


模拟器模拟微信小程序在客户端真实的逻辑表现,对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。

模拟器

编译代码


点击工具左下角的编译按钮或者使用快捷键 Ctrl(Command) + B,可以编译当前代码,并自动刷新模拟器。

同时为了帮助开发者调试具体页面或者进入的场景值,如同,开发者可以选择自定义编译模式。

wxml

自定义预处理


projectsetting

在项目设置页卡,我们提供了以下几个默认的预处理,可以解决大部分的代码文件预处理的问题

  1. ES6 转 ES5(可以应用于编译、预览、上传),使用 "babel-core": "^6.26.0"
  2. 上传代码时样式自动补全,使用 "postcss": "^6.0.1"
  3. 上传代码时自动压缩,使用 "uglify-js": "3.0.27"

对于高级开发者来说,完全可以自己编写自动化构建脚本对代码文件进行预处理,所以我们提供了 启用自定义处理命令 选项 开发者可以指定 编译前/预览前/上传前 需要预处理的命令 开发者工具使用 shell 的方式运行指定的命令,并在控制台中输出命令的执行日志

预处理命令的执行顺序

  1. 自定义预处理命令
  2. 默认预处理命令
  3. 编译/预览/上传

注:

  1. 编译前预处理命令,需要手动点击 "编译" 按钮,或者使用快捷键编译才能触发。文件修改无法触发该命令。
  2. Mac 版本的开发者工具无法复用 bash 中的 Path 环境变量。可能需要手动设置系统的 Path 环境变量,才能正常执行命令。

调试工具


调试工具分为 7 大功能模块:Wxml、Console、Sources、Network、Appdata、Storage、Sensor 

Wxml Panel

Wxml Panel 用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性,同时可以通过修改对应 wxss 属性,在模拟器中实时看到修改的情况。通过调试模块左上角的选择器,还可以快速找到页面中组件对应的 wxml 代码。

wxml

Sources panel

Sources panel 用于显示当前项目的脚本文件,同浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作,所以在 Sources panel 中开发者看到的文件是经过处理之后的脚本文件,开发者的代码都会被包裹在 define 函数中,并且对于 Page 代码,在尾部会有 require 的主动调用。

sources

Network panel

Netwrok Pannle 用于观察和显示 request 和 socket 的请求情况

network

注:uploadFile 和 downloadFile 暂时不支持在 Network Panel 中查看 

Appdata panel

Appdata panel 用于显示当前项目当前时刻 appdata 具体数据,实时地反馈项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。

appdata

Storage panel

Storage panel 用于显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。

storage

 

Console Pannel

Console Pannel 有两大功能:

  • 开发者可以在此输入和调试代码

    console1
     

  • 小程序的错误输出,会显示在此处

    4

 

Sensor panel

Sensor panel 有两大功能:

  • 开发者可以在这里选择模拟地理位置

    location

  • 开发可以在这里模拟移动设备表现,用于调试重力感应 API

    accelerometerchange

 

小程序操作区


小程序操作区帮助开发者模拟一些客户端的环境操作。例如当用户从小程序中回到聊天窗口,会触发一个小程序被设置为后台的api。

5

当小程序使用到多窗口的时候,可以在顶部操作区进行页面切换,需要注意的是这个操作只是为了方便开发者才存在的,在真实的微信客户端中是不会有的。

7

自定义数据上报


开发者工具上可以编辑和调试自定义分析的数据上报功能,点击菜单栏中的 “工具 - 自定义分析” 即可弹窗打开自定义分析:

event_list

在页面中可以新建、查看或修改事件,在修改事件的页面中编辑完毕后,点击底部的保存并测试按钮将保存当前配置,同时工具将在调试器上提示收到最新配置,并展示配置信息,展示的内容包括事件的 ID 和名称,以及每个动作的触发条件和上报数据:

begin_test

接着可以在模拟器中操作和触发事件。在模拟器中刷新小程序也将获取该测试配置,除非窗口被关闭。窗口关闭后模拟器不会再收到配置。当事件被触发上报时,工具上会展示上报信息,包括事件 ID、触发页面、触发方式、触发时动作、以及上报的字段值和数据:

report_ide

同时可以在窗口中点击 “同步结果” 会同步显示上报的数据:

report_mp 

关闭窗口后,配置将全部失效,模拟器不再收到配置并不再触发上报(小程序中使用 wx.reportAnalytics API 进行的数据上报仍会在工具中输出)。 测试成功后,可到小程序后台发布事件配置,即可正式生效收集所定义的事件数据。