在 React Native 开发中，调试是非常重要的一环。然而，在调试过程中经常会遇到一些问题，比如在真机上无法查看 log，或者在使用 Android 真机时无法看到 React 报错信息。针对这些问题，我们可以使用 rn_fb_log 这个 npm 包来解决。
什么是 rn_fb_log？
rn_fb_log 是一个 React Native 自定义 log 工具，它是由 Facebook 开源的一个项目，内部使用频繁。rn_fb_log 可以将 log 信息通过 WebSocket 发送到 Chrome 开发工具中，方便我们查看真机上的 log 信息，并且还支持打印 React 组件的属性和状态信息。
安装
在项目中使用 npm 或者 yarn 安装 rn_fb_log。
npm install rn_fb_log --save-dev # 或者 yarn add rn_fb_log --dev
如何使用 rn_fb_log？
在使用 rn_fb_log 之前，我们需要开启 Chrome 开发工具中的远程调试模式。在 Chrome 浏览器中输入 chrome://inspect，点击 “设备” > “打开远程设备” 即可。
现在我们可以开始使用 rn_fb_log 来打印 log 信息了。在 React Native 代码中，我们只需要按照以下方式使用：
import Logger from 'rn_fb_log';
Logger.log('this is a log message');此时，我们可以在 Chrome 开发工具中的 Console 标签页下看到打印的 log 信息。
如何打印组件属性和状态信息？
在 React Native 的开发过程中，我们可能会需要查看组件的属性和状态信息。rn_fb_log 也提供了这个功能。我们只需要在需要打印的组件中引入 Logger，并将组件类传入 Logger 中即可。
下面是一个示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ ------ ---- ------------
----- ----------- ------- --------- -
----- - -
----- ------ -------
--
-------- -
--------------------------
------ -
------
------------------------------
-------
--
-
-在该示例代码中，我们在 MyComponent 的 render 方法中使用了 Logger.logComponent(this) 方法来打印 MyComponent 的属性和状态信息。此时我们可以在 Chrome 开发工具中的 React 标签页下看到 MyComponent 的信息了。
总结
rn_fb_log 为 React Native 开发者提供了非常好用的 log 工具，方便我们查看真机上的 log 信息以及组件的属性和状态信息。在开发过程中，rn_fb_log 将是你不可缺少的工具之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fc081e8991b448dd0d0