React Native 使用 Hermes 调试 Javascript

React Native 2020-05-15 阅读 358 评论 0

Hermes 的出现

关于 React Native 的 JS 调试,可以通过浏览器调试器来调试 Javascript。这意味着我们的应用程序无需在设备的 Javascript 引擎中运行代码,而可以在 chrome 的 V8 引擎中运行(如果我们使用的是基于 chrome 的浏览器)。

这可能会导致某些奇怪的行为,因为引擎不一样,并且由于代码是在具有计算机 CPU 功能的浏览器中运行的,因此在开发过程中可能看不到性能缺陷。在Android上发布时,情况甚至变得更糟,因为取决于 Android 版本和设备型号,系统的 Javascript 引擎不是同质的,某些情况下的行为可能会有所不同。这就是为什么 Facebook 逐渐引入工具来提高设备之间的可靠性以及调试工具(例如 Hermes)的原因之一,Hermes 是为优化 React Native 的 Javascript 引擎。

使用 Hermes 能够减少 apk 的大小,优化内存使用,减少与应用程序交互时间(TTI)。

Hermes 如果提高 React Native 的性能

Hermes 的优化介绍可以参考 https://engineering.fb.com/android/hermes/

Hermes 开发调试

Hermes 的调试,可以使用 Google Chrome 浏览器的 DevTools,或者 Flipper。

1. Google Chrome 浏览器的 DevTools

React Native 需要 0.60.4 以上,参考 https://reactnative.dev/docs/hermes 配置,最后在 chrome://inspect 中打开设备,并调试 JS。

2. 使用 Flipper 的 Hermes Debugger

Flipper 是用于调试 iOS,Android 和 React Native 应用程序的平台。通过简单的桌面界面可视化,检查和控制你的应用程序。照常使用 Flipper 或使用插件API 对其进行扩展。React Native 0.62 以上开始支持 Flipper,只需在电脑上下载安装 Flipper,在安卓仿真器打开要调试的 App,Hermes Debugger 就会自动出现出现 Javascript 面板,开始断点调试。

Hermes Debbger

最后更新 2020-05-15