weex native端 js 调试方法
预览文件,写ui的时候我们常常需要能够一边写一边看到ui,以便于调整,weex的toolkit提供了实时预览的功能$ weex src/foo.vue该命令下,可以实时的去预览文件,而不需要编译后再去浏览,效率就高了很多,但是目前实时预览只支持web,虽然二维码也是有,但是使用playground扫码后一直显示的是 network err 而且是
预览文件,写ui的时候我们常常需要能够一边写一边看到ui,以便于调整,weex的toolkit提供了实时预览的功能
$ weex src/foo.vue
|
该命令下,可以实时的去预览文件,而不需要编译后再去浏览,效率就高了很多,但是目前实时预览只支持web,虽然二维码也是有,但是使用playground扫码后一直显示的是 network err 而且是确保了我的手机在局域网内的,所以暂时不纠结,虽然此时只能网页预览,但是对于开发效率也是有极大提高的,是个好东西
这是一个小插曲,下面就开始说怎么调试一个weex 页面
首先需要手机安装 playground https://weex.apache.org/cn/playground.html
$ weex debug
|
等待几秒的时间后,会打开一个网页
打开手机端安装的 playground app,扫描二维码,此时网页上就显示出了我们的设备连接了,如图
然后编译项目,生成对应的js
$weex compile src/foo.vue dist
此时我们可以看到这个页面生成的js
因为weex 暂时还没有直接给这个生成一个二维码的办法,但是根据playground 解析显示的原理,我们知道,weex是通过把pc上的node作为一个server,然后playground 扫描二维码的时候就是上这个server把对应的js 下载下来,那么很简单,我们需要获取到这个js 的html访问路径生成二维码即可
这样就粗糙的制造出来了我们的 生成的js的二维码,然后使用playground 再次扫描这个二维码
此时在playground已然打开这个js,当然我们做这么多并不是为了打开这个js,如果单纯打开js,那很简单,我们此时需要的是调试这个js
weex 的playground 实际的 断点调试等等的问题还很多,按照官方文档的操作会发现,实际上很多东西压根根本没法去调试
然而通过它的 Inspector 却是可以看到很多信息
这些内容都可以看到,而且是手机端解析后的情况,所以还是相当有用的,不管是网络请求,还是日志查看等等的
当然我尝试debug,一直是不停报错
Error:can not find the peer : chrome-inspector[j6g7lz4e4wpwa224fos-0x08]
@(C:\Users\dell\.xtoolkit\node_modules\weex-devtool\lib\components\P2PSession.js:119:24)
所以debug还是会存在不少问题,后面解决后把这块debug的内容补上来
更多推荐
所有评论(0)