Weex安装及使用

从官方的GitHub上看到,weex-debug在chrome的最新版本中无法直接调用,我之前也没有研究过weex,最近才开始学,反正一开始就遇到了这个问题。

但是从运行来看,应该是weex-debug改变了策略,或者之前的策略就兼容网上所说的chrome 80版本以上的问题,这个我也是从weex debug中发现的。

下面就weex的js debug展开真机调试,前提当然是保证项目可以正常运行,我这里随便写的,demo不要做过多的纠结。

注意⚠️:真机联调的前提条件是必须在一个局域网内,拥有同样的网段。

一、首先运行启动项目和debug

weex run web
weex debug

start-web

start-scan-img-1

start-debug

inspector port 9222

weex debug的启动页面,右上角可以选择显示语言。

二、手机安装weexPlayground及扫描二维码

手机默认已经安装好了weexPlayground,然后用手机先扫描debug的二维码,软件不可退出,再扫描项目的二维码。

三、打开weex devtool

前面weex debug启动之后有一个_inspector_ port 9222,用浏览器进行访问,然后选择`weex devtool`

根据inspector port,地址栏输入127.0.0.1:9222,然后选择weex devtool

进来后如图所示

四、启动js调试

上面的做完了之后,选择js调试,日志登记选择debug,就可以看到在代码中写的console了

如果是首页的话,前面地址栏的信息会自动刷新出来。

五、测试真机调试

Physical-Machine-Debug

Physical-Machine-Debug-2

六、其他

  • 如果在配置的时候,发现手机是空白的,在操作步骤都正确的情况下,可以在weex devtool的页面,刷新一下即可。

Physical-Machine-Debug-Error-Scheme

  • 不输出console.log的内容,这时需要核实下日志等级是否是debug。

标签: Weex