如何在原生鸿蒙中进行RN的断点调试

方式一 chrome devtools的方式

第一步：metro的方式加载bundle

先设置好原生这边的代码，然后记得打开RN服务器。

注意这个enableDebugger的值一定要设置为true

第二步：配置devtools调试端口号

打开chorome，输入chrome://inspect，会进入devtools的调试设置页面：

点击页面上的configure按钮，进行端口号的设置，如下图。

具体设置方式为：host默认localhost，后面端口是重点，如果你RN服务端开的是8081就是8081，你开的是8082就是8082。多配置是不要紧的，不要配错了就行。配置完上方的端口号，记得勾选左下角的Enable port forwarding，最后点击done即可。

按照上面这个顺序，依次配置完，点击完done后，等待大概5秒，会出现这个页面：

此时你会看到Remoto Target里面有了一个target，名叫Hermes React Native，点击这个target里面的inspect链接。

注意：这一块偶尔会自动消失，如果消失了，就要杀死APP重启，然后重新加载成功bundle。再去命令行里面按一下d键，等手机上出现reload以后，按一下刷新页面。刷新完等个大概5秒就出来了。

第三步：添加RN那边的JS源码

点击Sources > Workspace选项卡，点击Add folder按钮，在弹出来的资源选择器中选择当前项目的源文件然后点击选择文件夹按钮，如图：

问题解析

问题一：Failed to fetch source url xxx remote fetches not permitted

解决方案：这个问题可能是RN服务端被挂起了，重启手机，关闭命令行，然后clean一下项目，按照之前启动RN服务端的步骤重新来一遍，不报错了。

问题二：在chrome左边栏打断点并不生效

如果直接在chorome的左边栏打断点，进程并不会阻塞住。但是大家看我的Log已经在控制台打出来了，这说明该行代码其实已经执行过了。

解决方案：在开发安卓IOS的时候，直接在chrome左边栏打上断点就可以了。但是鸿蒙这里目前可能是不支持，需要使用在代码中加debugger的方式

如果仍然不生效，需要杀死APP重新加载一下bundle。然后关闭chrome调试的网页，重进一下，最终断点成功：

方式二 flipper的方式

第一步：下载flipper

flipper是一个三方工具，需要手动下载一下。下载链接为：https://github.com/facebook/flipper/releases/download/v0.171.1/Flipper-win.zip

进不去网页的家人们，记得用4G流量去下载即可。

第二步：配置flipper环境变量

下载完要先配置一下环境变量，配置的路径是有flipper.exe的那个

配置完以后，如果你此时打开flipper：

映入眼帘的是一个报错，无视即可不影响调试。

还有一种快速打开flipper的方式，你到RN服务端按一下D键，弹窗调试菜单，选择openDebugger，就会自动打开flipper。

第三步：进入flipper模式

点击一下Hermes Debugger(RN)，进入鸿蒙调试模式

这里左上角报了一个NO APPLICATION SELECTED，不用管，不影响调试。

第四步：Flipper中打开RN代码

点击完左边的Hermes Debugger(RN)后，到右边点一下源代码选项卡。

随后按Ctrl + P(macox上command + P)，然后输入你要调试的文件名，选择文件即可打开源代码

第五步：制造断点

和chrome调试不一样的地方是，这个Flipper在你要定位的行号点击即打下断点，当代码运行到此处时便会自动停下，如图所示：

当然，和chrome一样，flipper也支持在代码中写debugger的方式，在你想要断点的地方写上debugger即可，断点时会自动阻塞：

第六步：更新RN代码

当你修改完JS代码，flipper调试这里也会自动更新，前提是你得先把上一次的debug结束，点击右上角的继续执行脚本即可。

问题解析

问题一报错NO DEVICES FOUND

解决方案：出现这个问题，大概率是RN服务器没连上，重启一下手机和RN服务器即可。

问题二 Flipper连接手机失败

解决方案：如果是这个报错，说明RN服务器正常，但是手机没有连上电脑，可能是数据线松动了。检查一下USB调试是否配置，还有数据线是否松动。