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。

 

参考资料

 

Weex调试神器——Weex Devtools使用手册

 

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