使用Webstorm调试React Native / Expo应用程序

Question

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

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

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

  

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

，并且永远不会继续构建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，对native，expo做出反应，所以我不确定，但是应该可以直接在WebStorm中进行调试，对吧？如前所述，在Visual Studio Code中，包括调试在内的所有内容都可以正常运行，因此我认为代码中没有任何内容。也许这里有人知道问题出在哪里？

节点-v：v11.6.0 react-native -v：react-native-cli：2.0.1，react-native：0.57.1​​

任何帮助将不胜感激！预先感谢！

Answer 1

该问题的跟踪源为WEB-35719，请关注此问题进行更新

Answer 2

证明

如何

自尝试以来，好像已经更新了如何设置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

1. 在主菜单上，转到“运行” |“选择”。编辑配置，单击icons.general.add.svg，然后从列表中选择React Native。将打开“运行/调试配置：React Native”。

2. 选择是否要WebStorm为您构建并启动该应用程序：

3. 如果是第一次启动应用程序，或者自上次运行以来已更新其本机代码，请选中“构建并启动”复选框。

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

1. 如果选中“构建并启动”复选框，请选择目标平台，Android或iOS。根据您的选择，WebStorm将使用react-native run-ios或react-native run-android运行捆绑程序。

2. （可选）键入要传递给React Native的参数，例如，通过‑-simulator标志指定模拟器类型：‑-simulator =“ iPhone 4s”。

3. 在“ Bundler主机”字段中，指定运行React Native捆绑程序的主机，默认值为localhost。

如果使用的是Expo ，请更改默认的捆绑程序主机，以确保成功连接调试器。此连接可能会失败，因为默认情况下，WebStorm使用localhost启动调试，而Expo希望使用127.0.0.1或外部IP地址，具体取决于在Metro捆绑器配置的“连接”字段中选择的内容。有关详细信息，请参见调试使用Expo的React Native应用程序。

1. 在“ Bundler端口”字段中，指定运行React Native捆绑程序的端口，默认情况下选择8081，请从React Native官方网站了解更多信息。

2. 选择要使用的Node.js解释器。这可以是本地Node.js解释器，也可以是Windows Subsystem for Linux上的Node.js。

3. 指定react-native-cli的路径和应用程序的工作目录。 （可选）输入“ react-native run-android”或“ react-native run-ios”的环境变量。

4. 默认情况下，WebStorm在调用运行/调试配置时自动启动React Native捆绑程序。如果您已经从WebStorm外部（例如，从命令行）启动了捆绑程序，则可以重新使用它而无需停止并重新启动。在“启动前”区域中选择捆绑器，然后单击“删除”。