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

如何调试

更新时间:2017/08/04 访问次数:3958

本文将详细描述如何调试QAP项目。为了更加方便的调试,请安装Chrome浏览器。

环境准备
1. 进入根目录

cd /path/to/your project
对于还来得及创建工程的开发者,可以使用qap create hello_world命令创建最简单的工程,然后cd ./hello_world。

  1. 安装依赖

首次创建的工程或者编辑了package.json后,需要在工程根目录下运行npm install。

? bb npm install
npm WARN package.json @0.1.1 No repository field.
npm WARN package.json @0.1.1 No license field.

fsevents@1.1.2 install ~/qap/bb/node_modules/fsevents
node install

[fsevents] Success: “~/qap/bb/node_modules/.1.1.2@fsevents/lib/binding/Release/node-v46-darwin-x64/fse.node” already installed
Pass –update-binary to reinstall or –build-from-source to recompile
? bb

  1. 安装千牛

任意目录运行qap命令:

qap qianniu
该命令会打开浏览器,显示最新的千牛安装包二维码。扫码安装即可。

开始调试
1. 启动服务

在工程的根目录运行

qap debug
启动调试服务器,该命令会编译./src下的代码,完成后打开网页:

  1. 千牛扫码

在移动千牛首页,点击右上角扫一扫,扫描上一步骤显示出来的二维码。扫码完成后,http://localhost:8088/页面会显示当前使用千牛扫码的手机。如下图所示:

千牛扫码后显示待调试app
此时,手机会渲染页面,并等待调试。

  1. 开始调试

点击上图左下角的“Debugger”,浏览器会开启新的tab,开始调试。手机也开始加载插件。

如何打断点

点击“Debugger”后,浏览器打开的了tab后,按照步骤:

打开Chrome的调试工具
选择Sources页面
展开Runtime.js
展开webpack://
找到工程源码(通常源代码在.目录下的index.jsx)
打点
已经运行过得代码可以刷新浏览器页面或者使用千牛的刷新即可
如图二所示,在源代码打点即可调试。

图二:QAP工程进行源码调试

热加载(Live Load)
有了热加载功能,调试发现的问题在修改源代码后,不需要重启服务就能查看效果。修改源码并保存会触发重新编译,从控制台可以看到编译进度。编译完成后,刷新浏览器,运行就是新的代码。

热加载功能依赖于根目录下的webpack.config.js中的webpack-livereload-plugin模块。删除后即可禁用热加载功能。

Tips:新增源代码文件需要重启qap debug命令。

常见问题
1. 无法查看调试页面

查看本机是否启用了代理,如果有,选择忽略8080、3000和8088端口。因为qap-cli使用了这三个端口。

  1. 调试页面找不到webpack

检查webpack.config.js的source-map配置是否正确,推荐的是

_config.devtool = ‘inline-source-map’;

  1. 无法使用热加载

修改源码后,刷新浏览器没有运行新代码。查看webpack.config.js的dev函数中是否启用LiveReloadPlugin插件,推荐

function dev(){

_config.plugins.push(

new LiveReloadPlugin()
);

return _config;
}
…省略了代码,细节请看qap create hello_world创建工程里的webpack.config.js。

  1. 调试模式慢

qap debug需要从PC下载qap.json文件,并且解析。运行的代码是debug版本的源码,包含source-map,效率不如最终打包出的代码效率高。

FAQ

关于此文档暂时还没有FAQ
文档标签:
QAP
返回
顶部