QRN 开发工具 #

QRN 的开发和测试环节中,都会涉及使用开发工具来配置 QRN 的环境。本节主要介绍客户端中的QRN开发工具。为了方便开发,我们除了提供大客户端的环境,还提供了独立的壳程序,里面是一个纯净的 QRN 运行环境。

客户端地址 #

QRN v2.0.0 版本 下载地址

独立壳程序 #

  • Android:
  • iOS:gitlab*(安装方法见README,该壳程序可以在模拟器和手机中使用,注意,我们使用的是master分支,请 git checkout master,如果后续更新git pull出现冲突的时候建议直接删除然后重新git clone)
    iOS的独立壳程序需要使用XCode 8版本进行构建。XCode可以在Mac App Store中免费获得。 QRN v1.3.0 版本请切到 v1.3.0 分支

大客户端 #

框架map文件下载地址,用于对线上大客户端出现的异常进行定位调试 #

配置开发/测试环境 #

第一步:唤起开发工具 #

  • 独立APP-iOS:进入APP之后,摇晃手机,出现开发工具界面
  • 独立APP-Android:进入之后即是开发工具界面
  • iOS 大客户端:进入APP之后,摇晃手机,出现开发工具界面
  • Android 大客户端:点击QBUG图标之后,长按第三个按钮,出现开发工具界面

第二步:配置环境 #

  • Android 环境

    1. 第一步:完成如下配置,保存并重启。

      devtool-adr-evn

      参数说明:

      • LocalServer:本地服务环境 Host:本机的ip地址(确保手机和电脑在同一个局域网,若选中此环境,此项为必填Port:端口号(默认值:8081,一般不需要修改) Debug In The Chrome:在Chrome中调试Js代码:详细见:如何使用Chrome调试 Debug Mode:Js端的debug模式
      • Beta:beta环境 分支:项目所在的分支名(若选中此环境,此项为必填
      • release:线上环境
    2. 第二步:回到入口页面,完成如下入口参数的配置,然后点击『打开RN页面』进入项目。

      devtool-adr-entry

  • iOS 环境

    1. 第一步:完成如下配置,保存并重启。

      devtool-ios-evn

    2. 第二步:进入QRN DebugVC,配置hybridId、ModuleName和ViewName(不使用qrn_demo的项目可以不用填),点击打开 RN 页面按钮,进入 RN 页面 devtool-ios-debugvc

第三步:在RN页面中唤起开发工具 #

在已经进入RN页面之后,可以通过摇晃的方法,模拟器使用cmd+ctrl+z快捷键,唤起开发工具。

Dev-DevMenu

参数说明:

  • Reload Js:重新加载业务的js代码,若前端js发生更改,可通过此功能刷新,查看更改后的效果。
  • JsBundle加载方式:进入开发工具界面。
  • Log查看 / 日志配置:详细见:调试日志查看
  • 检查元素:查看View布局的相关信息。
  • 显示帧率:显示FPS覆盖层,帮助你调试性能问题。
  • 开启(关闭)Live Reload (Beta) / Enable Live Reload:开启或关闭实时刷新功能,开启后只要保存了业务js代码就会动态刷新页面,而不需要点击Relead JS。
  • 显示(隐藏)刷新按钮 / 打开(关闭)测试小球:显示或隐藏浮层刷新按钮,如果选择显示,可以单击浮层小球来刷新页面,长按来弹出菜单栏。