Weex 入坑指南:Debug 调试是一门手艺活

Weex 开发了一套 Weex Devtools,在项目中使用 weex debug 命令即可打开(如果使用了 cooking 或者 starter-kit,可以使用 npm run debug) ,它与 Chrome Devtools 极为相似,学习成本很低,目前只支持在 Chrome 浏览器里使用。


Debug 启动及设备连接

使用 weex debug 指令(最新版本 starter kit 添加了 npm run debug 支持),会弹出 Weex Devtools,打开 Playground,扫描 Devtools 的二维码来启动 Debugger:

载入项目

在设备连接上 Debugger 后,你需要扫描你的 Weex 应用的二维码将应用载入 Playground,在 Devtools 主界面选择 Debugger 或者 Inspector 进行操作。

主要功能

Debugger

备注:如果出现闪退,可能是由于 WXDevtool 与 Weex SDK 版本不匹配

Debugger 可以用于调试 Weex 中的 js 代码,可以设置断点,查看调用栈,与普通的 Chrome 调试操作方法相同。 Console 可以限制前端的 Log 信息。

在 Source 中的 Runtime.js 中可以看到载入的模块的全部的 js 文件,可以通过打断点的方式对他们进行调试:

Inspector

Inspector 功能丰富,能够用来查看 Element / Network / Console log / Screencast / Box Model / Native View 等。

备注:目前除了 Element 与 Console 之外,其他功能可能会由于版本不支持而导致不可用。


Element

Element 中会显示 Android / iOS 上的 native 或者 vDOM 结构以及 style 属性和 layout 图,鼠标移动在 DOM 树时会有选定的元素被高亮,正如 Chrome Devtools 中的那样,有助于开发者定位和发现节点。

Screencast 是对屏幕图像的拷贝,在远程调试时能看到远程设备的界面。

Console

控制台显示了 Android / iOS 设备上的 log 信息,包括了 native log 和前端 log,可以在首页 Log Level 设置过滤,方便开发者进行针对性的调试和错误查看。

备注:尽管官方说明中表示这只显示 Native log,但是实际上前端的信息也会被输出。

Sources

Debugger 已经提供了 Sources 的断点能力,在 Inspector 中的 Sources 无意义。

Network

Network 展示了 bundle 资源加载网络访问的性能。如果 bundle 资源在 device 本地,Network 就不会显示数据,使用方法同 Chrome Devtools 中的 Network。

Resources

和 Network 一样,远端访问的资源文件会显示在这里,没有实际作用。不过如果你的应用用到了数据库,可以在这里方便的查看数据库文件而无需 root。

参考资料


吐槽:截稿时,尽管更新了 Playground 和 weex-devtool,iOS Debugger 仍然会闪退,可以参考:weex-devtool-iOS 修改引入的 Weex SDK 版本。

编辑于 2017-02-20

文章被以下专栏收录

    只看代码的话,上 https://github.com/ElemeFe 。这一群人,关心的不是「如何写前端」而是「如何很好地运行一个 ( web ) APP」;这一群人,会在监控屏上加上弹幕,会让实习生自主招聘,会设计、编写、监控整个 APP 的生命周期;这一群人,玩的时候... 更卖力,就像从来没来过那般卖力,卖力地热爱生活。所以这些创作大多基于 ❤️