远程调试

使用开发者工具,连接局域网,对百度 APP 中的小程序进行调试,帮助开发者快速调试、查找小程序在百度 APP 客户端中存在的问题。

前提条件

  1. 基础库版本在 2.0.53 及以上;
  2. 开发者工具和百度 APP 客户端在同一局域网内;
  3. 百度 APP 客户端的登录用户和开发者工具的登录用户是当前 appid(智能小程序 ID)的开发者。

温馨提示:请在调试过程中,尽量保持手机处于亮屏状态。

调试步骤

  1. 打开开发者工具,单击工具栏上的“远程调试”按钮。

  2. 使用百度 APP 客户端扫码,打开远程调试窗口。
    图片

  3. 远程调试窗口包括:页面视图、调试器视图和信息球。
    3.1 页面视图:远程调试工具的页面视图和客户端中的页面视图保持同步,展示了小程序页面的运行情况。
    注:远程调试工具端的镜像视图不支持 TabBar 等 NA 组件。

    刷新按钮:修改代码后,点击刷新按钮使百度 APP 客户端获得最新的开发代码,无需重新扫码打开远程调试窗口,实现静默刷新;
    结束调试按钮:点击顶部的结束调试按钮,结束远程调试。

    图片

    3.2 调试器:调试器在小程序的调试中起到了非常重要的作用。

    在调试器的 console 面板中,开发者可以调试代码、查看小程序输出信息;
    在调试器的 source 面板中,可以查看源代码,进行断点调试;
    在调试器的 network 面板中,可以查看小程序发出的网络请求。

    图片
    3.3 信息球:展示了百度 APP 客户端和远程调试窗口之间的信息传输延时:

    将鼠标放到信息球上,会出现客户端的基本信息,包括手机型号、运行系统、百度 APP 版本、基础库版本、往返耗时、连接方式、连接状态;
    信息球的延迟越小,远程调试窗口和百度 APP 客户端的通信越流畅:当延时小于 50 时,信息球的颜色为绿色;当延时大于 50 小于 100 时,信息球的颜色变成橙色;当延时大于 100 时,信息球的颜色变为红色。

    信息球的位置可以拖拽变化

    远程调试 - 图4

    手机端显示

    远程调试 - 图5