为了方便开发者、简化开发流程,我们推出了桌面应用“千牛开发环境”。该工具集成了工程创建、工程导入、代码调试和项目打包等功能。
打开“千牛开发环境”应用程序,会展示工程列表(首次打开时为空)。
该页面提供了创建工程的功能:
你也可以导入示例代码:
在工程管理界面,点击调试按钮就会打开新的页面.
如上图所示,调试界面分为“H5调试”和“真机调试”区域。在H5预览区域,向下滚动后点击蓝色的“调试按钮”即可调试该页面的H5版本。源码调试,需点击展开webpack://标签。
真机调试需要点击“真机调试”区域,切换展示内容:
使用移动千牛扫描二维码,链接PC进行调试。相对于H5版本,真机调试多了个“Inspector功能”。在此分别列下debugger和inspector分别是什么功能:
点击这个按钮将会打开js debugger页面,您可以通过debugger页面调试js(诸如打断点 查看js log 和查看调用堆栈)
点击这个按钮将会打开inspector页面,您可以通过这个页面查看weex页面的element属性结构,包含高亮元素,展示样式表,以及显示native的log。同时可以打开一个远程的手机镜像,便于查看界面。
另外调试方块中的ElementMode可以用来选择element树显示原始的native组件树还是显示面向前端同学的DSL(HTML)组件树开启Remote Debug后weex的js将会在chrome的v8里运行(仍然会在native端渲染),只有开启Remote Debug才能断点调试js(点击Debugger按钮会自动打开Remote Debug)
不开启RemoteDebug 可以通过inspector页面查看weex页面elements树
点击Inspector
后:
上图中展示的手机画面的操作会反映到手机上。
目前编辑功能较弱,不支持代码搜索、展示文件大纲(outline)、代码导航(navigate)和代码缩略图展示等常用的功能。推荐开发者使用自己喜欢的编辑器
如Sublime Text、Virtual Studio Code、IntelliJ IDEA等任何成熟的IDE进行开发。保存即可触发重新编译。
点击左侧菜单栏的打包图标(从上到下第四个),开始打包:
打包可以和调试等同时进行。