项目调试 | DolphinWeex跨平台开发框架

# 调试步骤

# 准备调试工具

常用的调试工具集：

美居Sit版本的app
网络请求抓包工具
手机文件管理应用
weexPlayground

# 安装调试工具美居 App

DEV版本：
- Android下载链接：
- https://www.pgyer.com/androidmeijudev
- ios下载链接：
  - https://www.pgyer.com/iosmeijudev
Sit版本：
- Android下载链接：
- https://www.pgyer.com/androidmeijusit
- ios下载链接：
  - https://www.pgyer.com/iosmeijusit
安装抓包工具
- charles(推荐)
- fiddler
手机文件管理应用
- MAC系统
  - iFunBox.app(ios)
  - Android文件传输.app (Android)
weexPlayground [下载链接](）

# 调试方法

# 1.真机预览

真机预览效果有多种方法：

# 1.1 启用 APP 扫一扫测试功能

TIP

Sit环境的美居账号可以使用正式环境的美居账号

通过下面方式开启扫一扫测试
- 安卓：美居 APP-》我的-》设置-》关于美居-》长按美居 logo，下面出现一个"扫一扫"
- iOS：美居 APP-》左下角浮动的小黑球》混合扫描

开发本地启动服务"npm start"，手机网络要与开发本地处于同一局域网

浏览器页面右侧生成二维码，即可通过美居 APP 里面的扫一扫进行测试

# 1.2 覆盖插件包

配网绑定完插件后，会在美居首页出现插件的入口，如下图中的"sit 彩珠"：
打开美居 APP 的文件管理，APP 会下载相应的 zip 插件包以及在 MideaHome（Android是在sdcard根目录下的MideaHome, iOS 是在 MideaHome/5.0plugins）文件夹下解压出相应的插件文件夹，如智能灯插件对应的插件包文件夹是 T0x13_L0000001

Android 示例

iphone 示例
将开发本地的工程根目录下 dist 中的所有文件覆盖到 T0x13_L0000001 文件夹里面
重启美居 APP，点击"sit 彩珠"这个入口，就可以对替换之后的插件进行调试

# 2.使用 weex debug

首先 npm start 将项目运行起来，下面讲解如何使用 weex devtool 在电脑上开发调试项目代码

# 2.1 准备工作

手机上安装支持 weex-toolkit 调试的美居

在 pc 上安装 weex-toolkit：

npm install weex-toolkit –g

安装好以后使用 npm weex-toolkit -v 查看，如果有对应版本号显示，说明安装成功了

$ npm install weex-toolkit –g
$ npm weex-toolkit -v
6.9.0

1
2
3

weex debug 的其他选项

-v， --version           显示weex-debugger版本信息
-h， --help              展示帮助信息
-H --host [host]        设置浏览器打开的host地址（适用于代理环境下，如docker环境等）
-p， --port [port]       设置调试服务器的端口，默认值 8088
-m， --manual            开启该选项后将不会自动打开浏览器
-e，--ext [ext]          设置文件拓展名用于编译器编译，默认值为vue
--min                   开启该选项后将会压缩jsbunlde
--telemetry             上传用户数据帮助提升weex-toolkit体验
--verbose               显示详细的日志数据
--loglevel [loglevel    设置日志等级，可选silent/error/warn/info/log/debug，默认值为error
--remotedebugport [remotedebugport]设置调试服务器端口号，默认值为9222

1
2
3
4
5
6
7
8
9
10
11

# 运行 weex debug，第一次运行时会先去下载 weex-devtool 等待一会安装完成。安装好了会自动打开http://10.8.81.38:8088/ 前面的是你的 pc 的 ip 地址，端口可以自己修改。

注：

如果建立连接后，美居扫文件地址二维码没有反应，可能是端口被封、占用，也有可能是因为内网 ip 和公网 ip 通信的问题。可以用以下命令去启动 weex debug：

weex debug -p 8083 -H 10.8.81.38 --remotedebugport 8084

weex debug 运行之后页面：

Alt text

# 接下来，先将手机和电脑接入同一网段，确认使用的美居版本已支持了 weex-devtool（安卓 ios 最新的版本都已支持，ios 安装完需在设置-通用-描述中信任 Midea Smart Technology），启动美居，进入扫码模式，点击扫一扫扫描页面中的二维码

注：

安卓：美居 APP-》我的-》设置-》关于美居-》长按美居 logo，下面出现一个"扫一扫"

iOS：美居 APP-》左下角浮动的小黑球》混合扫描

扫完了网页会变成这样，页面是空白的，接下来就可以开始调试了

Alt text

# 2.2 调试工作

安卓：用美居扫描二维码，然后点击 weex-devtool 上的 Inspector 按钮，可以看到电脑上同步了手机界面。

注：

weex debug -p 8083 -H 10.8.81.38 --remotedebugport 8084

-p 8083 是指定调试服务器的端口号，默认是 8088，但有时端口被占用了或者被封了，就可以自己指定一个可用的端口号，经测试 8081，8088 这些端口号可以使用

-H 10.8.81.38 是指定打开浏览器的 ip 地址，这里的 ip 对应的是电脑的地址，windows 用户可以这样查询：开始-cmd-输入 ipconfig，如下图。 MAC 的话应该和 Linux 差不多，起一个 terminal 终端，然后输入 ifconfig 就可以看到对应的 ip 地址了。

Alt text