React Native 中 Chrome 调试器连接问题及解决方法
2024-03-05 21:22:00
在 React Native 中解决 Chrome 调试器连接问题
问题根源
在使用 React Native 开发应用程序时，你可能会遇到一个问题，即尝试在 Chrome 调试器中打开应用程序时出现 "Attempting to debug JS in Flipper (deprecated)..." 错误消息。这表明 Flipper 已弃用，并且你的系统需要安装 Flipper 才能处理 "flipper://" URL 方案。
解决方法
步骤 1：安装 Flipper
如果你的系统上还没有安装 Flipper，请访问 Flipper 网站并按照安装说明进行操作。
步骤 2：更新 Flipper
确保你的 Flipper 已更新到最新版本。前往 Flipper 网站并检查更新。
步骤 3：启用 Chrome 调试器
在你的 React Native 应用程序中，打开 "设置" 菜单并启用 "Debug JS Remotely"（远程调试 JS）。
步骤 4：重新启动 Metro 捆绑器
在终端中，停止 Metro 捆绑器（如果正在运行）并使用以下命令重新启动它：
npx react-native start --reset-cache
步骤 5：重新运行应用程序
重新运行你的 React Native 应用程序。
步骤 6：检查端口
确保 Chrome 调试器监听的端口与 Metro 捆绑器监听的端口相同。默认情况下，Metro 捆绑器使用 8081 端口。使用以下命令检查 Metro 捆绑器的端口：
npx react-native info
步骤 7：配置 Chrome 调试器
在 Chrome 中，打开开发者工具（按 F12）并导航到 "Sources"（来源）选项卡。在 "Debugger"（调试器）部分，确保选中 "Enable JavaScript debugging for webviews"（启用 Web 视图的 JavaScript 调试）。
步骤 8：重试连接
重新尝试在你的 React Native 应用程序中打开 Chrome 调试器。它现在应该能够连接到你的应用程序。
其他提示
- 如果问题仍然存在，请尝试重新安装 Flipper 和 React Native。
- 检查你的杀毒软件或防病毒软件是否阻止了 Flipper 或 React Native。
- 在 React Native 的 GitHub 问题跟踪器上搜索类似的问题。
常见问题解答
1. 为什么会出现 "Attempting to debug JS in Flipper (deprecated)..." 错误？
这表明 Flipper 已弃用，并且你的系统需要安装 Flipper 才能处理 "flipper://" URL 方案。
2. 如何检查 Flipper 是否已安装？
转到 Flipper 网站并查看你的系统上是否已安装 Flipper。
3. 如何更新 Flipper？
前往 Flipper 网站并检查更新。
4. 如何重新启动 Metro 捆绑器？
在终端中，停止 Metro 捆绑器（如果正在运行）并使用以下命令重新启动它：
npx react-native start --reset-cache
5. 如何检查 Metro 捆绑器的端口？
使用以下命令检查 Metro 捆绑器的端口：
npx react-native info
