reactNative 代码调试

谁借莪１个温暖的怀抱￠ 2022-03-21 12:46 361阅读 0赞

# reactNative 代码调试 #

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

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

iOS9引入了新特性[App Transport Security (ATS)][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 代码，就能立刻看到变化。具体的操作:

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

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

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

在开发者菜单中选择"Debug JS Remotely"选项，即可以开始在 Chrome 中调试 JavaScript 代码。点击这个选项的同时会自动打开调试页面 [http://localhost:8081/debugger-ui.(如果地址栏打开的是][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/][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/

[Link 1]: https://segmentfault.com/a/1190000002933776
[App Transport Security _ATS]: https://developer.apple.com/library/archive/releasenotes/General/WhatsNewIniOS/Articles/iOS9.html#//apple_ref/doc/uid/TP40016198-DontLinkElementID_13
[http_localhost_8081_debugger-ui.]: http://localhost:8081/debugger-ui.%28%E5%A6%82%E6%9E%9C%E5%9C%B0%E5%9D%80%E6%A0%8F%E6%89%93%E5%BC%80%E7%9A%84%E6%98%AF
[react-native-debugger]: https://github.com/jhen0409/react-native-debugger
[react-devtools]: https://github.com/facebook/react-devtools/tree/master/packages/react-devtools
[https_npm.taobao.org_mirrors_electron]: https://npm.taobao.org/mirrors/electron/