reactNative 代码调试

注意：使用 Chrome 调试目前无法观测到 React Native 中的网络请求，你可以使用第三方的react-native-debugger来进行观测。

默认情况下，iOS 会阻止所有非 https 的请求。如果你请求的接口是 http 协议，那么首先需要添加一个 App Transport Security 的例外，详细可参考这篇帖子。需要注意的是，安全机制与网页环境有所不同：在应用中你可以访问任何网站，没有跨域的限制。

iOS9引入了新特性App Transport Security (ATS).
解决办法:
在Info.plist中添加NSAppTransportSecurity类型Dictionary。
在NSAppTransportSecurity下添加NSAllowsArbitraryLoads类型Boolean,值设为YES

1. 找到目录 demo/ios/demo/info.plist
2. 按照上面提到的方式添加信息，正确的修改会看到下图这个样子，注意类型NSAppTransportSecurity为Dictionary，NSAllowsArbitraryLoads为Boolean(注意⚠️，单元测试下面也有一个Info.plist，修改那个文件是没有作用的！)

对于实在不支持HTTPS的应该首先考虑添加例外

添加例外的方式也很简单：
左键Info.plist选择open with source code
然后添加类似如下的配置:

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>qq.com</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
        </dict>
        <key>sina.com.cn</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
        </dict>
    </dict>
</dict>

热启动开发

想开发 iOS 版本，你现在可以在 XCode 中打开刚刚创建的工程(SampleAppMovies/iOS/SampleAppMovies.xcodeproj)，然后只要按下⌘+R就可以构建并运行。这个操作会同时打开一个用于实现动态代码加载的 Node 服务（React Packager）。所以每当你修改代码，你只需要在模拟器中按下⌘+R，而无需重新在 XCode 中编译。

想开发 Android 版本，先连接你的设备或启动模拟器，然后在SampleAppMovies目录下运行react-native run-android，就会构建工程（注意在第一次构建中会联网下载很多依赖，耗时较长。在国内的话务必使用稳定的 XX 工具，否则会一直失败）并自动安装到你的模拟器或者设备，同时启动用于实现动态代码加载的 Node 服务。当你修改代码之后，你需要打开摇一摇菜单(摇一下设备，或者按下设备的 Menu 键，或者在模拟器上按下 F2 或 Page Up，Genymotion 按下 ⌘+M)，然后在菜单中点击“Reload JS”。

刷新 JavaScript

传统的原生应用开发中，每一次修改都需要重新编译，但在 RN 中你只需要刷新一下 JavaScript 代码，就能立刻看到变化。具体的操作:

在开发菜单中点击"Reload"选项。也可以在 iOS 模拟器中按下Command⌘ + R ，Android 模拟器上对应的则是按两下R ( 要有 ctrol + m ，按2下r会直接自动更新 ) 。
选择开发菜单中的"Enable Live Reload"可以开启自动刷新，这样可以节省你开发中的时间。

更神奇的是，你还可以保持应用的当前运行状态，修改后的 JavaScript 文件会自动注入进来（就好比行驶中的汽车不用停下就能更换新的轮胎）。要实现这一特性只需开启开发菜单中的Hot Reloading选项。

Chrome 开发者工具（只能打印js ，不能查看请求）

在开发者菜单中选择"Debug JS Remotely"选项，即可以开始在 Chrome 中调试 JavaScript 代码。点击这个选项的同时会自动打开调试页面 http://localhost:8081/debugger-ui.(如果地址栏打开的是 ip 地址，则请自行改为 localhost)
在 Chrome 的菜单中选择Tools → Developer Tools可以打开开发者工具，也可以通过键盘快捷键来打开（Mac 上是Command⌘ + Option⌥ + I，Windows 上是Ctrl + Shift + I或是 F12）。打开有异常时暂停（Pause On Caught Exceptions）选项，能够获得更好的开发体验。

注意：Chrome 中并不能直接看到 App 的用户界面，而只能提供 console 的输出，以及在 sources 项中断点调试 js 脚本。一些老的教程和文章会提到 React 的 Chrome 插件，这一插件目前并不支持 React Native，而且调试本身并不需要这个插件。不过你可以安装独立（非插件）版本的 React Developer Tools 来辅助查看界面布局，下文会讲述具体安装方法。
注意：使用 Chrome 调试目前无法观测到 React Native 中的网络请求，你可以使用功能更强大的第三方的react-native-debugger来进行观测。这个目前只支持Mac！！！

react-devtools

npm install -g react-devtools

译注：react-devtools 依赖于 electron，而 electron 需要到国外服务器下载二进制包，所以国内用户这一步很可能会卡住。此时请在环境变量中添加 electron 专用的国内镜像源：ELECTRON_MIRROR=“https://npm.taobao.org/mirrors/electron/”，然后再尝试安装 react-devtools。(如果下载不下来可以尝试这个，不改的情况下不要用yarn，yarn下载不下来)
这个东西貌似也是在iOS下支持的比较好，有条件的建议使用Mac

安装完成后在命令行中执行react-devtools即可启动此工具：

react-devtools

在运行 RN 应用时，可以在终端中运行如下命令来查看控制台的日志：

$ react-native log-ios
$ react-native log-android

文章地址https://reactnative.cn/docs/debugging/