React Native 调试进阶篇

发表于 | 分类于 | 阅读次数: | 本文总阅读量 次

工欲善其事，必先利其器。有了一个顺手的调试工具和调试方法，能很大的提高开发效率。

本文对于一些基本的调试功能会简单的介绍一下他们的原理和使用方法，具体的操作可以看官网的介绍，上面已经讲的很清楚了，就不浪费时间再写一遍了。

本文主要讲一下如何使用 React Developer Tools 配合模拟器自带的调试功能来调试，以及如何 debug。

刷新功能

刷新应用

在 iOS 模拟器中按下Command⌘ + R，Android 模拟器上对应的则是 按两下 R。相当于开发者菜单中的 Reload js，即将你项目中 js 代码部分重新生成 bundle，然后传输给模拟器或手机。

如果在iOS模拟器中按下 Command⌘ + R 没啥感觉，则注意检查 Hardware 菜单中，Keyboard 选项下的 Connect Hardware Keyboard 是否被选中。

自动刷新应用

选择开发菜单中的 Enable Live Reload 可以开启自动刷新。

自动刷新

打开该功能之后，React Native 能够监听你的 js 变化，自动生成 bundle 然后传输到你的模拟器或者手机上。
但是需要注意的是，此功能和 Reload js 一样，每次刷新的时候都会返回到启动页面。

自动热更新功能

选择开发菜单中的 Enable Hot Reloading 可以开启自动热更新功能。

开启热更新功能

如果说上面的 Enable Live Reload 功能解放了你的双手，那么 Enable Hot Reloading 功能还解放了你的时间。当你每次保存修改好的代码的时候，Hot Reloading 功能便会生成此次修改代码的增量包，然后传输到手机或模拟器上以实现热加载。

并且，Enable Hot Reloading 的刷新功能是在当前页面刷新，而不是返回到启动页面。

Errors and Warnings

红屏或黄屏提示都只会在开发版本中显示，正式的离线包中是不会显示的。

Errors

应用内的报错会以全屏红色显示在应用中（调试模式下），我们称为红屏（red box）报错。你可以使用 console.error() 来手动触发红屏错误。

红屏警告

部分代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
export default class AwesomeProject extends Component {
  
  constructor(props) {
    super(props);
    this.onPressLearnMore = this.onPressLearnMore.bind(this);
  }
  
  onPressLearnMore() {
    console.error("这是一个红屏警告");
  }
  
  render() {
    return (
      <View style={styles.container}>
        <Button
          style={styles.button}
          onPress={this.onPressLearnMore}
          title="点我"
        />
      </View>
    );
  }
}

Warnings

应用内的警告会以全屏黄色显示在应用中（调试模式下），我们称为黄屏（yellow box）报错。点击警告可以查看详情或是忽略掉。 和红屏报警类似，你可以使用 console.warn() 来手动触发黄屏警告。

黄屏警告

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

1
2
console.disableYellowBox = true;
console.warn('YellowBox is disabled.');

也可以通过代码屏蔽指定的警告，像下面这样调用 ignoreWarnings 方法，参数为一个数组：

1
console.ignoredYellowBox = ['Warning: Each child'];

数组里面可以包含多个你想忽略的告警的关键词，关键词希望适当的精确，屏蔽掉一些不必要的警告。

注意： 个人认为没有必要完全关闭黄屏警告，因为一些黄屏警告是因为我们的代码不规范造成的，通过黄屏警告也可以知道我们的代码有哪些不规范的地方。

访问控制台日志

下面的两种方法不能同时运行，否则其中一种将会无效

在终端查看

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

1
2
react-native log-ios
react-native log-android

终端查看log

如果是 Android 应用，无论是运行在模拟器或是真机上，都可以通过在终端命令行里运行 adb logcat *:S ReactNative:V ReactNativeJS:V 命令来查看。

在终端打印log.png

通过 Chrome 开发者工具查看

在开发者菜单中选择 Debug JS Remotely 选项，即可以开始在 Chrome 中调试 JavaScript 代码。

打开 Chrome 开发者工具

打开 Chrome 的开发者工具即可看到打印出来的日志。

在 Chrome 开发者工具的控制台查看 log

在 Chrome 开发者工具中我们也可以调试代码，给代码打断点，相信大家都知道相关的操作，这里就不再详细的讲了。

在真机上调试

如果在 Android 5.0+ 的设备上调试，将设备通过 USB 连接到电脑上后，可以使用 adb 命令行工具来设定从设备到电脑的端口转发：

1
adb reverse tcp:8081 tcp:8081 // 第一个是主机的端口号，第二个是真机／模拟器的端口号

如果设备 Android 版本在 5.0 以下，则可以在开发者菜单中选择 Dev Settings - Debug server host for device，然后在其中填入电脑的 IP地址:端口。

然后就可以和上面的示例一样来调试啦。

Show Perf Monitor

该功能主要是对 UI 和 JavaScript 的 FPS 的监控。

FPS 是测量用于保存、显示动态视频的信息数量。 通俗来讲就是指动画或视频的画面数。 例如在电影视频及数字视频上，每一帧都是静止的图象；快速连续地显示帧便形成了运动的假象。 每秒钟帧数(FPS) 愈多，所显示的动作就会愈流畅。

打开性能监控

打开之后就能看到性能监控的数据了。具体关于 React Native 性能的分析可以看官网的介绍，现在本文暂不做详细的讲解，之后可能会专门开一个关于性能的文章。

性能监控的数据

React Devtools

需要 React Native 0.43 或者更高的版本

我们平时在开发页面的时候，都用过查找元素的功能，模拟器自带的调试功能个人感觉不是很友好，但是官方提供了 react-devtools 可以很好的来查找 Dom 元素。

如果要使用它，需要在全局安装：

1
npm install -g react-devtools

在项目文件的目录下运行启动命令：

1
react-devtools

这时会弹出 react-devtools 窗口，里面是我们页面的元素。 react-devtools 的优点是可以搭配模拟器的 Toggle Inspector 功能一起使用，效果棒棒哒，哈哈。

首先我们先开启模拟器的 Toggle Inspector 功能。

开启 Toggle Inspector功能

下面是使用方法：

react-devtools 的使用方法

打开调试功能之后我们能看到，调试功能的界面有很多 Tab，下面来解释一下各个 Tab 的功能和作用。

Inspect

顾名思义，这个 Tab 是用来查找元素的，点击想要检查的元素，就可以显示出来元素的位置、样式和层级关系等。

Inspect 示例

Perf

Perf 显示的是应用的性能监控界面。

支持原创