weex debug 记录

使用weex开发三端产品的时候，我们一般先在web上调试，然后再在native端调试。由于我们的产品不支持web端，因此web上正确显示界面只是开发过程中的一个必要条件。幸好weex中提供了自动刷新和debug功能，可以帮助我们在native端简化开发时的排查过程。

准备工作

使用weex创建一个新工程，然后添加 iOS 平台，使用到的命令：

weex create proj-name
//
cd proj-name
npm install
weex platform add ios
cd platforms/ios
pod install

然后对 Hello.vue做一些改动，主要是添加了一个按钮和文本，点击按钮，文本显示点击数。

<template>
  <div class="root">
    <text class="label">count: {{counts}}</text>
    <div class="counts" @click="clickMe">
      <text class="btnLabel">Click Me</text>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      counts: 0
    }
  },
  methods: {
    clickMe () {
      console.log('counts', this.counts);
      this.counts ++;
    }
  }
}
</script>
<style scoped>
.root {
  align-items: center;
}
.counts {
  background-color: gold;
  width: 300px;
  height: 120px;
  justify-content: center;
  align-items: center;
}
.btnLabel {
  font-size: 40px;
}
</style>

自动刷新

通过上述准备工作，工程已然拥有了自动刷新的功能，使用步骤很简单，在工程下输入：

weex run ios

根据提示，选择某一个模拟器或者真机(如何连接iPhone)，然后会看到模拟器中显示页面：

simulator index.png

这时，修改Hello.vue中按钮的名字，然后保存文件，就会看到模拟器中的按钮名字也随之变化。
其中的原理是：weex tool创建了一个 server，同时App中建立一个连接到这个server的socket连接。当本地文件做了修改，weex会更新js文件并发送“refresh”消息到socket，这样App可以重新渲染js并生成页面。

单页面调试

单独调试某一个页面： weex debug xxx.vue。
这时，chrome会打开一带有二维码的页面，使用 weex playground app(需要在App Store上下载，下称playground)扫描二维码，chrome会进入调试界面，但此时页面无内容。这时，需要在新页面问号旁继续点击，会弹出js列表，如xxx.js；继续使用playground，这时playground上会出现 xxx.vue对应的页面。

simulator.png

在native端集成 devtools

修改podfile，添加：

pod  'WXDevtool', '~> 0.20.0', :configurations => ['Debug']

在weexSDK初始化之前的代码中添加：

#import <WXDevTool/WXDevTool.h>
[WXDevTool launchDevToolDebugWithUrl:@"ws://192.168.0.101:8888/debugProxy/native/16ec50b6-4901-4f56-b482-b31484317544"];

首先，特别提醒：不需要设置 [WXDevTool setDebug:YES];，添加后会造成白屏。 代码中的Url从何而来呢？这时需要运行: weex debug ，chrome会打开一带有二维码的页面。此时若把鼠标移到二维码上，会显示所代表的链接，形如：

http://192.168.0.101:8088/devtool_fake.html?_wx_devtool=ws://192.168.0.101:8088/debugProxy/native/ee6213d5-e95c-45f1-9135-53d53b256d0c

想办法把ws头开始的部分更新到你的iOS代码中，然后在真机上运行，待App成功启动后，chrome页面会自动进入调试界面。

device.png

参考资料

集成 Devtools 到 iOS: 其中提到的 weex debug --port 8888 --channelid 1 不可用
Weex调试神器——Weex Devtools使用手册: 有点过时，但可以帮助理解debug的原理和过程

Comments

Categories

Tags