一、下载flipper源码并安装依赖
git clone https://github.com/facebook/flipper.git
cd flipper/desktop
yarn
yarn start
二、下载watchman
运行yarn start时报错
Watchman: Watchman was not found in PATH. See https://facebook.github.io/watchman/docs/install.html for installation instructions
Failed to start watching for changes using Watchman Error: Watchman was not found in PATH. See https://facebook.github.io/watchman/docs/install.html for installation instructions
at ChildProcess._handle.onexit (node:internal/child_process:285:19)
at onErrorNT (node:internal/child_process:483:16)
at process.processTicksAndRejections (node:internal/process/task_queues:90:21) {
errno: -4058,
code: 'ENOENT',
syscall: 'spawn watchman',
path: 'watchman',
spawnargs: [ '--no-pretty', 'get-sockname' ]
}
打开网址 https://facebook.github.io/watchman/docs/install.html,下载最新版本的watchman,解压后存入路径 E:\watchman-v2025.02.03.00-windows。右键计算机->属性->高级系统设置->环境变量->系统变量->path,新建条目 E:\watchman-v2025.02.03.00-windows\bin。
win+r打开cmd,输入watchman -v,显示版本号,证明watchman配置完成。
二、下载openSSL
重启电脑后再次运行yarn start报错
Failed to start FlipperServer Error: It looks like you don't have OpenSSL installed. Please install it to continue.
at ensureOpenSSLIsAvailable (E:\flipper\desktop\flipper-server\lib\app-connectivity\certificate-exchange\certificate-utils.js:80:15)
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
at async loadSecureServerConfig (E:\flipper\desktop\flipper-server\lib\app-connectivity\certificate-exchange\certificate-utils.js:89:5)
at async ServerController.init (E:\flipper\desktop\flipper-server\lib\app-connectivity\ServerController.js:71:25)
at async FlipperServerImpl.connect (E:\flipper\desktop\flipper-server\lib\FlipperServerImpl.js:421:13)
at async start (E:\flipper\desktop\flipper-server\lib\startServer.js:186:5)
Flipper Server failed to initialize Error: It looks like you don't have OpenSSL installed. Please install it to continue.
at ensureOpenSSLIsAvailable (E:\flipper\desktop\flipper-server\lib\app-connectivity\certificate-exchange\certificate-utils.js:80:15)
at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
at async loadSecureServerConfig (E:\flipper\desktop\flipper-server\lib\app-connectivity\certificate-exchange\certificate-utils.js:89:5)
at async ServerController.init (E:\flipper\desktop\flipper-server\lib\app-connectivity\ServerController.js:71:25)
at async FlipperServerImpl.connect (E:\flipper\desktop\flipper-server\lib\FlipperServerImpl.js:421:13)
at async start (E:\flipper\desktop\flipper-server\lib\startServer.js:186:5)
官网下载最新3.3.2 light版本的exe文件,一路点击next安装完成,配置环境变量<openssl 安装路径>\bin
下载最新版本的openssl可能会遇到报错
[conn][error] [ 'Failed to exchange certificate', Error: Warning: error while verifying CSR self-signature
三、使用flipper调试react native应用
本人使用的rn版本是0.73.0。
1. react devtools不可用
分别运行flipper和react native的启动命令npm start,对应的设备会自动连接到flipper,当Sidebar旁边选择的是具体的应用时,react devtools会显示不可用。
解决方案就是切换Sidebar旁边的选择器选择react native.
flipper在v0.239.0后不再支持react native,所以需要降级到v0.239.0。
git checkout v0.239.0
yarn
yarn start
2. hermes debugger不可用
降级后hermes debugger仍然无法使用,github讨论区里有人指出v0.237.0版本中可以正常使用,但本人降级到该版本仍然无法使用。
不过在0.237.0版本中,在选择具体应用的情况下可以使用react devtools,这解决了不选择具体应用时无法使用network plugin的问题。
考虑到react native在0.73版本已经不推荐用flipper进行调试,这里采用chrome debugger作为替代方案。Debugging Basics · React Native