视图调试 ​

背景 ​

长期以来在Tenon 的业务开发过程中由于缺乏有效的调试手段，往往只能采用改代码看效果的方式确定代码的正确性，在一定程度上影响了业务开发的效率，因此我们通过对Tenon runtime core、HummerCli、HummerSdk的改造，制定了Hummer视图调试协议，通过cli提供的代理服务，将页面预览服务和Tenon运行时打通，实现了简单的数据通信能力，并基于这个能力对预览服务进行了增强，现在你可以在网页中浏览Tenon页面的视图树，并且可以进行查看视图详情、高亮视图等操作，与此同时我们将业务中的log也一并透传到预览页面中，支持log分级查看和搜索功能

使用说明 ​

首先我们需要将全局上的HummerCli升级到0.4.0及以上版本

npm i @hummer/cli@^0.4.0 -g

然后我们需要将tenon项目中的tenon-vue升级到1.5.1及以上版本

npm i @hummer/tenon-vue@^1.5.1

之后在tenon项目中我们启动HummerCli的dev模式

hummer dev

你可以使用Hummer Playground APP进行扫描连接到cli代理服务上，之后在新版的preview页面中我们点击页面左下角的开启调试即可进入debug页面

在debug页面中，你可以在页面底部查看和搜索业务中的所有日志

同时页面中会显示当前以及连接到cli代理服务的页面信息，通过选择页面你可以看到已选页面的视图树，点击视图树节点，可以查看当前视图节点位置、样式等信息，同时Hummer Playground的页面对应节点会高亮

功能规划 ​

视图调试目前功能还比较简单，主要是为了验证整个流程的可行性，在下一期的规划中，我们会将收集到的开发中迫切需要的功能加入 如实时修改样式，网络请求，内存占用,CPU占用等

原理介绍 ​

相关原理，请期待我们的后续文章。