写在前面:作为前端开发工作者,一款好的调试工具必不可缺。你可能已经习惯了chorme提供的简单好用的网页调试工具,但在weex中,调试是一个巨坑!!
Weex调试踩坑之旅
在weex中,调试是一件非常麻烦但事,好在weex官方文档中提供了一些方案
1. weex-toolkit命令
在上一篇文章中介绍了weex-toolkit这一脚手架工具,现在介绍以下该脚手架提供的一些命令。
1.1 create
weex create weex-demo //创建weex项目
1.2 preview
该命令会在浏览器中一观察模式打开hello.vue编译后生成的页面,这意味着你此时修改代码能够触发重新编译。
weex preview hello.vue // 预览.vue文件
1.3 compile
理解不足,暂时留白
weex compile [source] [dist] [options]
1.4 platform
理解不足,暂时留白
weex platform add ios
weex platform remove ios
1.5 run
理解不足,暂时留白
weex run ios
weex run android
weex run web
1.6 debug
该命令能够打包指定的vue文件,并在浏览器中启动一个服务,在其中调试js源代码
weex debug
上述命令会去安装weex debug的包,安装完成会自动打开浏览器
此处会踩到的坑:
- 执行weex-debug命令提示类似以下的报错信息:
这可能是因为npm包安装不完整
解决方法:
npm cache clean --force
- 执行weex-debug命令会启动下载,且下载卡住
解决方法:
ctrl + c 终端下载,执行上一条操作 - 执行weex-debug命令启动下载,下载缓慢
暂无解决方案,耐性等待吧
解决所有问题后出现以下画面
手机下载 weex playground
点击扫码,跳转如下页面
左侧展示的就是当前手机weex playground应用的实时状况了
2. 使用weex debug 调试页面
执行以下命令,调试src目录下的index.vue文件
weex debug src/index.vue
进入该页面,点击图中二维码,手机扫码,即可在Inspector中看到预览效果了。
此处可能会踩到的坑:
- 扫码后手机跳转页面白屏
原因:- 手机与电脑未连接同一wifi
- 手机和电脑连接了非开放的wifi
踩完所有坑后,我们来认识一下工具栏上的这些功能:
1. JS Debug
开启后可在调试工具的source标签下对js文件进行调试
2. Network
开启后可在调试工具对network标签下查看http请求
3. LogLevel
设置调试工具console标签下的显示等级
- debug: log的别名
- log:显示所有log信息
- info:显示info等级及以上的log信息
- warn:显示warn等级及以上的log信息
- error:显示error等级及以上的log信息
4. ElementMode
设置调试工具element标签下的元素展示方式
- native:编译后在android或ios展示的元素结构
- vdom:编译前原始的dom结构