文档中心 > 千牛开放平台2.0

千牛开发工具

更新时间:2017/03/02 访问次数:1248

为了方便开发者、简化开发流程,我们推出了桌面应用“千牛开发环境”。该工具集成了工程创建、工程导入、代码调试和项目打包等功能。

下载地址

OSX - 千牛应用开发工具-nightly build 2017-03-02.dmg

Windows x64 - 千牛应用开发工具.exe


工程管理

打开“千牛开发环境”应用程序,会展示工程列表(首次打开时为空)。

该页面提供了创建工程的功能:

你也可以导入示例代码:


调试功能

在工程管理界面,点击调试按钮就会打开新的页面.

如上图所示,调试界面分为“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进行开发。保存即可触发重新编译。


项目打包

点击左侧菜单栏的打包图标(从上到下第四个),开始打包:

打包可以和调试等同时进行。

FAQ

关于此文档暂时还没有FAQ
返回
顶部