调试 debug 模式

mtl debug [ iOS | Android | WX | DD]

android 调试

概述

  • Android调试,指使用Android设备真机或者Android 网易模拟器 MuMu进行工程H5代码的调试;
  • 准备:Android设备真机或者Android 网易模拟器 MuMu,pc端安装Chrome浏览器;
  • 安装android 调试环境 adb,Mac 系统可以参照此链接:https://www.jianshu.com/p/69ba21b2996c; 另外win 系统可以参照此链接:https://blog.csdn.net/weixin_30587927/article/details/96966394。
  • 调试期间,开发者可在Chrome浏览器中跟踪方法是否调用;回调方法是否响应;代码逻辑是否正确等。

网易模拟器 MuMu 调试步骤

  • 在电脑终端命令行进入已创建的工程目录(创建工程文档见:链接
  • Windows电脑输入:adb connect 127.0.0.1:7555,mac电脑输入:adb connect 127.0.0.1:5555 ,链接网易模拟器 MuMu
  • 输入:mtl d android,应用会自动运行到模拟器
  • pc端打开Chrome浏览器,地址栏录入地址:chrome://inspect/#devices

debug1.png

  • 点击红框内“inspect”(需翻墙),打开h5代码调试页面

debug2.png

  • 在页面打断点,点击模拟器运行工程的调用按钮,进行代码跟踪调试

真机调试步骤

  • 在电脑终端命令行进入已创建的工程目录(创建工程文档见:链接
  • 输入:mtl b android,打包工程
  • 数据线连接真机设备,电脑命令输入:adb install [文件路径],应用会自动运行到真机上面
  • pc端打开Chrome浏览器,地址栏录入地址:chrome://inspect/#devices

debug3.png

  • 点击红框内“inspect”(需翻墙),打开h5代码调试页面

debug2.png

  • 在页面打断点,点击真机运行工程的调用按钮,进行代码跟踪调试

iOS 调试

  • iOS 需要搭建好xcode 开发环境;

    提示: 目前iOS仅支持模拟器调试(模拟器调试,需要苹果系统的电脑,下载Xcode)。

使用Safari浏览器调试WebView

使用Safari浏览器调试WebView比较简单无需过多的程序配置,只需点击几个开关按钮即可.

首先打开模拟器设置中"Safari浏览器"→"高级"→"Web检查器"的开关 如下图所示.

WechatIMG1.jpeg

然后我们打开Mac电脑的Safari浏览器,打开系统偏好设置(快捷键 commond + ,)或者如下图所示.

WechatIMG3.png

点击菜单中的"高级",然后勾选"在菜单栏中显示"开发"菜单".方便我们进行快速的调试. WechatIMG4.png

这时候开启模拟器就能在菜单栏"开发"选项中找到我们的模拟器.

WechatIMG6.png

接下来我们只需要跑起我们的工程进入对应的WebView页面即可进行调试.

WechatIMG7.png

调试界面如下所示.

WechatIMG57.png

微信小程序调试

执行指令:

$ mtl debug wx

打开"微信开发者工具"( 下载 ),然后选择 /项目根目录/output/wx/debug/proj 导入项目。
image.png

钉钉小程序调试

  • 钉钉小程序需要安装 蚂蚁金服开放平台 小程序工具,下载地址。命令行进行mtl debug DD 后 ,用钉钉小程序工具导入当前工程目录./output/dd/debug/proj ,这样就可以在钉钉小程序工具下看到 修改app目录下工程源码的调试效果。

模拟器调试

打开小程序开发者工具,导入项目

Jietu20190821-185844.png

image.png

打开项目的时候必须选择钉钉企业自建应用

image.png

登录个人钉钉账号,同时关联通过钉钉后台创建的应用

image.png

注意:一定要是企业自建应用,选择需要关联的小程序

image.png

模拟器上面调试的时候可以忽略域名检查

image.png

现在就可以进行模拟器调试了。

真机预览

设置安全域名

小程序需要事先设置一个或多个服务端安全域名(或IP),小程序前端只能通过这些安全域名(或IP)与服务端进行网络通信。
登录钉钉后台配置

image.png

本地真机调试

如果本地的html静态资源在本地,需要使用内网穿透功能,实现真机访问电脑端的localhost,内网穿透文档中只有Mac的实例,如果使用的是windows电脑,执行命令的方式为ding -config=./ding.cfg -subdomain=jetyonyou 3000

配置地址,同时配置到钉钉后台的安全域名

image.png

image.png

更改localhost:3000地址为配置的地址,然后点击预览,真机扫描就可以体验真机版本了

image.png

debug 调试host配置和功能说明:

  • (仅调试微信需要)调试配置pc的host 文件如下: 添加“ 127.0.0.1 mobile.yyuap.com ” ;
  • 修改文件热更新,如果在项目工程下,修改了app目录下的工程源码都会自动更新到output平台目录下的工程目录,需要在 android ,iOS ,wx小程序工具 ,钉钉小程序工具 里刷新就可以看到修改的效果,安卓、iOS 修改project.json后需要重新执行mtl debug 命令。
  • 友情提示,终端命令行在调试状态下 ,一直处于工程的监听中 ,请不要中断当前的状态 ,直到想要终止调试,进行其他操作。