功能概述

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

调试流程

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

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

远程调试窗口

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

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

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

调试器

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

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

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

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

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

信息视图

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

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

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

手机端展示

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

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

原文:

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