weex-05-调试工具的使用

本节任务

weex-toolkit 调试用具的使用

第一步

打开终端 cd 进入我们的工程目录中去

E9EA0201-1E91-43E1-86B3-2C01316FB9BF.png

第二步

执行命令行代码打开调试工具

npm run debug

4CF5829F-956B-46F4-A34A-930AA1109C2E.png

浏览器会自动打开如下

61DF251D-6F91-4134-8A91-0939E8F3BB02.png

第三步

这时使用我们的app的扫码功能启动调试

57905050-A0DC-464A-9472-D9D723F32197.png

单机"检查按钮",进入的页面如下

4DCC081C-E0A8-4744-9A7E-2F15182C6AAA.png

发现浏览器页面和手机页面同步,你可以点击手机上面的cell 试试看,发现不能跳转页面,可能做了限制!

接下来,我们试试它的扫码功能

第四步

新打开一个终端窗口

F4687B2A-730D-47D3-96E1-A68284B67721.png

cd 进入工程目录 输入下面命令,打开web服务器

npm run serve

浏览器输入下面地址

http://localhost:8080

80787D69-EFB5-44D2-8BED-1A08A6C42151.png

第五步

使用app扫描 二维码

71A5A752-CC7A-4F7F-9941-8F63335FAE16.png

浏览器调试页面会自动同步

第六步

我们修改一下foo.vue中内容

21A06E3C-BAB0-44DF-A83C-CF25AF88E0BD.png

command + S 进行保存

此时刷新浏览器或者手机预览页面是没有用的,因为app.weex.js和app.web.js文件没有重新打包,接下来教大家如何自动打包

第七步

开启自动打包

新建一个终端页面

cd 进入工程目录 输入 npm run dev

3A054B25-6A12-4E32-9CF3-AFCCCAFFF170.png

第八步

在手机端 点击刷新按钮

我们会发现手机和浏览器调试页面都会更新

E45F0DE7-7462-473E-86B8-0F1ADDE798A1.png