时间戳

首页 > 解决方案 > 使用 webstorm 调试一个 react native / expo 应用程序

webstorm - 使用 webstorm 调试一个 react native / expo 应用程序

问题描述

我无法在 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”，捆绑器只会说：

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

并且永远不会继续构建 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

解决方案

证明

证明调试工作正常

如何

Configurations自从您尝试以来，您的设置方式似乎有所更新。

尝试更改Bundler hostto127.0.0.1并重试。

将捆绑器主机更改为 127.0.0.1

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

网络风暴 v2020.2

这些说明就是我所需要的：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. 如果您选择了 Build and launch 复选框，请选择目标平台，Android 或 iOS。根据您的选择，WebStorm 将使用 react-native run-ios 或 react-native run-android 运行捆绑程序。

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

  3. 在 Bundler host 字段中，指定 React Native bundler 运行的主机，默认值为 localhost。

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

  1. 在 Bundler port 字段中，指定 React Native bundler 运行的端口，默认选择 8081，更多信息请访问 React Native 官网。

  2. 选择要使用的 Node.js 解释器。这可以是本地 Node.js 解释器或适用于 Linux 的 Windows 子系统上的 Node.js。

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

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

推荐阅读