【问题标题】：Degugging a react native / expo app with webstorm使用 webstorm 调试 react native / expo 应用程序
【发布时间】：2019-01-10 11:52:33
【问题描述】：

我无法在 WebStorm 中调试我的 react native / expo 应用程序，但我可以在 Visual Studio Code 中调试。我有一个可以使用 expo 成功运行的 react 本机应用程序。我根据这个网站上的信息设置了配置：

https://blog.jetbrains.com/webstorm/2018/02/webstorm-2018-1-eap-181-3263/#debugging-expo

当我单击“运行”或“调试”并关闭“远程调试 JS”时，捆绑程序会构建一个 JS 包，并且应用程序会在我的设备上启动。但是一旦我打开“远程调试 JS”，bundler 只会说：

通过执行以下命令启动自定义调试器： : [我的工作目录] [再次我的工作目录]

并且永远不会继续构建 JS 包。片刻之后，设备上出现红屏，并显示：

无法连接远程调试器

连接到远程调试器时超时

onFailure DevSupportManagerImpl.java:851

onFailure WebsocketJavaScriptExecutor.java:83

运行 WebsocketJavaScriptExecutor.java:142

handleCallback Handler.java:790

dispatchMessage Handler.java:99

...

捆绑器除了上面的消息之外没有说任何其他内容。一旦我关闭远程调试，捆绑器就会再次开始构建并完成

“构建 JavaScript 包：在 ...ms 内完成”

像往常一样，但设备再次显示带有上述消息的红屏，或者除了常规的白屏外不显示任何内容，底部显示“Downlading JavaScript bundle 100,00%”。我要么必须在 WebStorm 中停止并重新启动，要么必须关闭 expo 应用程序并重新打开它。无论哪种方式都会让应用在我的设备上重新启动。

这是我第一次使用javascript，react native，expo，所以我不确定，但是应该可以直接在WebStorm中调试，对吧？如前所述，在 Visual Studio Code 中，包括调试在内的所有内容都可以正常工作，因此我认为代码中没有任何内容。也许这里有人知道问题出在哪里？

节点-v：v11.6.0 react-native -v: react-native-cli: 2.0.1, react-native: 0.57.1

任何帮助将不胜感激！提前致谢！

【问题讨论】：

标签： webstorm

【解决方案1】：

证明

如何

自您尝试以来，您如何设置 Configurations 似乎有更新。

尝试将Bundler host 更改为127.0.0.1，然后重试。

我昨天刚刚设置了 Webstorm v2020.2 来调试我的 Expo 应用程序，它按预期工作。

我只需要这些说明：https://www.jetbrains.com/help/webstorm/react-native.html#ws_react_native_create_run_config

在主菜单上，转到运行 |编辑配置，单击 icons.general.add.svg 并从列表中选择 React Native。运行/调试配置：React Native 打开。
选择您是否希望 WebStorm 为您构建和启动应用程序：
如果您是第一次启动应用程序或自上次运行后更新了其本机代码，请选中构建和启动复选框。

如果您的应用程序使用 Expo，请清除该复选框，因为此捆绑程序会自行处理流程。

如果您选择了构建和启动复选框，请选择目标平台，Android 或 iOS。根据您的选择，WebStorm 将使用 react-native run-ios 或 react-native run-android 运行捆绑程序。
（可选）键入要传递给 React Native 的参数，例如，通过 ‑‑simulator 标志指定模拟器类型：‑‑simulator="iPhone 4s"。
在 Bundler host 字段中，指定 React Native bundler 运行的主机，默认值为 localhost。

如果您使用的是 Expo，请更改默认捆绑程序主机以确保与调试器成功连接。此连接可能会失败，因为 WebStorm 默认使用 localhost 开始调试，而 Expo 需要 127.0.0.1 或外部 IP 地址，具体取决于 Metro bundler 配置的 Connection 字段中选择的内容。有关详细信息，请参阅调试使用 Expo 的 React Native 应用程序。

在Bundler port字段中，指定React Native bundler运行的端口，默认选择8081，更多信息请到React Native官网了解。
选择要使用的 Node.js 解释器。这可以是本地 Node.js 解释器或适用于 Linux 的 Windows 子系统上的 Node.js。
指定 react-native-cli 的路径和应用程序的工作目录。（可选）键入 react-native run-android 或 react-native run-ios 的环境变量。
默认情况下，当您调用运行/调试配置时，WebStorm 会自动启动 React Native 捆绑器。如果您已经从 WebStorm 外部（例如，从命令行）启动了捆绑程序，则可以在不停止和重新启动的情况下重新使用它。在“启动前”区域中选择您的捆绑程序，然后单击“删除”。

【讨论】：

【解决方案2】：

问题已在WEB-35719跟踪，请关注更新

【讨论】：