CRN提供了方便的调试工具和流程，前端工程师无需了解Native的开发工具和语言即可进行开发调试。

iOS中调试CRN

在模拟器中调试（仅限Mac环境）

1.首先安装XCode最新版，然后安装Commandline Tools（请自行搜索下载安装，记住JS工程师从此也是App开发工程师啦）.

2.下载最新Ctrip App测试包（样例）。

安装到模拟器上，启动运行模拟器：

xcrun instruments -w 'iPhone 6s'

在已经启动好的模拟器中安装应用：

xcrun simctl install booted ctrip.app

（这特别注意，是app，不是ipa安装时需要提供的是APP的文件路径）

3.模拟器中调试，点击App后进入小海豚，从『CRN调试入口』进入，输入Ctrip URL即可进入目标页面进行调试。例如URL样例：http://localhost:5389/index.ios.bundle?CRNModuleName=xxxx&CRNType=1&param1=yyyy，URL规则请参考Conf文档。

在真机中调试

1.下载最新Ctrip App测试包，请到MCD中下载最新版本测试包。

2.使用iTools等类似工具安装Ctrip App。

Android中调试CRN

在模拟器中调试

在真机中调试

打开测试版App内的开发者选项菜单

  1. 在iOS中晃动设备或者在模拟器上按下 control + ⌘ + z 。
  2. 在Android中晃动设备或者按下硬件菜单键（一般只有老设备或者大多数模拟器还有这个键。比如，在 genymotion 中你可以通过按下 ⌘ + m 来模拟点击硬件菜单）。PC键盘上也有这个键，一般在标准键盘右边的Ctrl和右Windows键之间，即模拟鼠标右键的键。

YellowBox（黄屏警告）与RedBox（红屏报错）

调用console.warn方法会在屏幕上产生一个黄色背景的信息。点击这行信息会转入全屏的警告页面。

而调用console.error方法则会直接产生一个全屏的红色背景报错页面。

在默认情况下，开发模式中启用了黄屏警告。可以通过以下代码关闭：

console
.disableYellowBox = 
true
;

console
.warn(
'YellowBox is disabled.'
);

你也可以通过代码屏蔽指定的警告，像下面这样设置一个数组：

console
.ignoredYellowBox = [
'Warning: ...'
];

数组中的字符串就是要屏蔽的警告的开头的内容。（例如上面的代码会屏蔽掉所有以Warning开头的警告内容）

Chrome开发者工具

在Chrome上调试JS代码，需要在开发者选项菜单中选择Debug JS Remotely，这会打开一个新的http://localhost:5389/debugger-uiTab页。

在Chrome中，按下⌘ + option + i或者选择视图(View) -> 开发者(Developer) -> 开发工具(Developer Tools)来打开开发工具控制台。打开有异常时暂停（Pause On Caught Exceptions）选项，能够获得更好的开发体验。

如果是在真机中调试：

  1. 在iOS上 —— 打开RCTWebSocketExecutor.m文件，将其中的localhost替换为你电脑的ip地址。然后晃动设备打开开发菜单，即可开始调试。

  2. 对于Android设备 —— 如果你通过usb连接了一个Android 5.0或更高版本的设备，则可以通过adb命令建立一个从设备向电脑转发的端口：adb reverse tcp:5389 tcp:5389(点击这里查看adb命令的帮助)。或者，你可以通过摇晃打开开发者菜单，选择Dev Settings，然后在Debug server host for device中设置你电脑的ip地址:端口号。

实时刷新

这个选项可以在JS代码变更后，自动触发所连设备或者模拟器自动刷新。以下是开启方法：

  1. iOS平台上选择开发者选项菜单中的 Enable Live Reload 即可开启js代码自动刷新。
  2. Android平台上，先打开开发者选项菜单，选择 Dev Settings ，然后选择 Auto reload on JS change 选项。

FPS（每秒帧数）监视器

开发者选项菜单中的FPS覆盖层来帮助你调试性能问题。

results matching ""

    No results matching ""