VSCode React Native 扩展调试 Expo 项目的端口冲突解决方案

在使用 VSCode React Native 扩展调试 Expo 项目时，开发者可能会遇到端口冲突问题。本文将深入分析问题原因并提供完整的解决方案。

问题现象分析

当开发者使用 Expo Go 启动调试时，默认会显示一个包含 QR 码和 URL 的标签页，其中端口设置为 19000。然而，React Native Tools 扩展的默认调试端口却是 8081。这种端口不匹配会导致调试失败，出现连接错误。

根本原因

从 Expo SDK 49 版本开始，Expo 默认使用 8081 端口进行调试。这与 React Native Tools 扩展的默认设置一致，但 Expo Go 的调试界面仍显示 19000 端口，造成了混淆。

解决方案

对于使用 Hermes 引擎的 Expo 项目，推荐采用以下调试配置：

1. 首先使用 expo 命令行工具启动应用
2. 然后在 VSCode 中使用附加调试器的方式连接

具体配置如下：

{
    "name": "附加到 Hermes 应用",
    "request": "attach",
    "type": "reactnativedirect",
    "cwd": "${workspaceFolder}"
}

注意事项

1. Hermes 引擎不支持远程 JS 调试功能
2. 确保 Expo SDK 版本在 49 或以上
3. 调试前请确认没有其他进程占用 8081 端口

最佳实践建议

1. 对于新项目，建议直接使用最新版 Expo SDK
2. 调试前检查端口占用情况
3. 考虑使用 Android Studio 或 Xcode 的原生调试工具作为备选方案
4. 定期更新 React Native Tools 扩展以获取最新功能修复

通过以上方法，开发者可以有效地解决端口冲突问题，顺利进行 Expo 项目的调试工作。