• 功能概述
    • 调试流程
    • 远程调试窗口
      • 调试器
      • 信息视图
    • 手机端展示

    功能概述

    真机远程调试功能可以实现直接利用开发者工具,通过网络连接,对手机上运行的小程序进行调试,帮助开发者更好的定位和查找在手机上出现的问题。

    调试流程

    要发起一个真机远程调试流程,需要先点击开发者工具的工具栏上 “远程调试” 按钮。

     真机调试  - 图1

    此时,工具会将本地代码进行处理打包并上传,就绪之后,使用手机客户端扫描二维码即可弹出调试窗口,开始远程调试。

    远程调试窗口

    使用手机扫描此二维码,即可开始远程调试。

    要结束调试,直接关闭此调试窗口,或点击右下角 “结束调试” 按钮即可。

     真机调试  - 图2
    远程调试窗口分为两部分,分别是左侧的调试器视图、右侧的信息视图。开发者可以在调试器里直接进行代码的调试,并查看 Storage 情况;信息视图则可以查看目前与手机和服务器的连接情况,以及发生的错误信息等。

    调试器

    在远程调试的调试器里,开发者可以在 Console 面板里对代码进行调试,在 Sources 面板里查看小程序的源代码并进行断点单步调试,在 Storage 面板里查看小程序的 Storage 使用情况等。

     真机调试  - 图3

    注意,要在 Console 里对小程序进行调试,需要将调试的上下文切换到 VM Context 1,如图所示。

     真机调试  - 图4

    在 Sources 面板查看源代码时,开发者所有的文件路径都是以 weapp:// 开头的。

     真机调试  - 图5

    除了可以在调试器进行单步调试,开发者还能在代码中手动插入 debugger; 语句进行断点调试。因此,如果想要在小程序启动的尽早时刻断点,可以在进入远程调试之前,编辑代码手动在需要断点处的代码插入 debugger; 语句来实现。

    WXML、AppData、Storage 面板的操作和开发者工具调试模拟器时的操作一致。注意,如果在右侧信息视图取消勾选了 “使用工具端的 Storage”,则所有的 Storage 数据将被存储在手机上,将不再出现 Storage 面板。

     真机调试  - 图6

     真机调试  - 图7

     真机调试  - 图8

    信息视图

     真机调试  - 图9

    右侧的信息视图展示了手机、网络连接的信息。手机信息展示手机的型号、系统、名称、微信版本等信息,以及通信延时。通信延时越小,与手机的通信越流畅。

    在 “连接信息” 里,展示了工具与服务器的连接信息,包括了连接状态、服务器状态等,当连接故障、服务器阻塞影响到调试的过程和流畅度时,此处将展示这一状态。当连接状态为 “已结束” 时,表明调试已被终止。

    “警告和错误” 展示了最近发生的错误和警告信息。如果网络连接断开,此处将会询问开发者是否需要重新连接。

    手机端展示

    调试过程中的手机端展示如下所示。

    当手机无网络或者进入了断点状态时,将会出现一个浮层提示并阻止进一步的操作。

     真机调试  - 图10
     真机调试  - 图11

    原文:

    https://developers.weixin.qq.com/miniprogram/dev/devtools/remote-debug.html