使用 webstorm 调试 react native / expo 应用程序
Degugging a react native / expo app with webstorm
我无法在 WebStorm 中调试我的 react native / expo 应用程序，但我可以在 Visual Studio 代码中调试。
我有一个本机应用程序，我可以使用 expo 成功 运行。我根据这个网站上的信息设置配置：
https://blog.jetbrains.com/webstorm/2018/02/webstorm-2018-1-eap-181-3263/#debugging-expo
当我单击“运行”或“调试”并关闭“远程调试 JS”时，捆绑器会构建一个 JS 捆绑包并在我的设备上启动该应用程序。
但是一旦我打开“远程调试 JS”，bundler 只会说：
Starting custom debugger by executing: : [my working directory] [my working directory again]
并且永远不会继续构建 JS 包。
片刻之后，红屏出现在设备上，上面写着：
Unable to connect with remote debugger
Timeout while connecting to remote debugger
onFailure
DevSupportManagerImpl.java:851
onFailure
WebsocketJavaScriptExecutor.java:83
run
WebsocketJavaScriptExecutor.java:142
handleCallback
Handler.java:790
dispatchMessage
Handler.java:99
...
打包程序除了上面的消息外什么也没说。
一旦我关闭远程调试，捆绑器就会再次开始构建并以
结束
“构建 JavaScript 捆绑包：在 ...ms 内完成”
像往常一样，但设备再次显示带有上述消息的红色屏幕，或者只显示常规的白色屏幕，底部有一条消息“正在下载 JavaScript 捆绑包 100， 00%”。我要么必须在 WebStorm 中停止并重新启动，要么必须关闭 expo 应用程序并重新打开它。无论哪种方式都会使应用程序在我的设备上重新启动。
这是我第一次使用javascript，react native，expo，所以我不确定，但应该可以直接在WebStorm中调试，对吧？如前所述，在 Visual Studio 代码中，包括调试在内的所有内容都可以正常工作，所以我认为代码中没有任何内容。也许这里有人知道问题出在哪里？
节点-v:v11.6.0
react-native -v: react-native-cli: 2.0.1, react-native: 0.57.1
任何帮助将不胜感激！提前致谢！
问题已在 WEB-35719 跟踪，请关注它以获取更新
证明
指南
自从您尝试后，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 和 select React Native。 Run/Debug 配置：React Native 打开。
选择是否要 WebStorm 为您构建和启动应用程序：
Select 如果您是第一次启动您的应用程序，或者如果您自上次 运行.
如果您的应用程序使用 Expo，请清除该复选框，因为此捆绑程序会自行处理流程。
如果您select勾选了“构建并启动”复选框，请选择目标平台，Android 或 iOS。根据您的选择，WebStorm 将 运行 捆绑器与 react-native run-ios 或 react-native run-android.
可选地，键入要传递给 React Native 的参数，例如，通过 ‑‑simulator 标志指定模拟器类型：‑‑simulator="iPhone 4s".
在Bundler host字段中，指定React Native bundler所在的主机运行s，默认值为localhost。
如果您使用的是 Expo，请更改默认的捆绑器主机以确保成功连接调试器。此连接可能会失败，因为默认情况下 WebStorm 使用 localhost 开始调试，而 Expo 需要 127.0.0.1 或外部 IP 地址，具体取决于 Metro bundler 配置的连接字段中的 selected。有关详细信息，请参阅调试使用 Expo 的 React Native 应用程序。
在Bundler port 字段中，指定React Native bundler 运行s 所在的端口，默认选择8081，更多信息请访问React Native 官网。
选择要使用的 Node.js 解释器。这可以是本地 Node.js 解释器或 Windows 子系统上的 Node.js Linux.
指定react-native-cli 的路径和应用程序的工作目录。或者，键入 react-native run-android 或 react-native run-ios.
的环境变量
默认情况下，当您调用 run/debug 配置时，WebStorm 会自动启动 React Native 捆绑器。如果您已经从 WebStorm 外部启动了捆绑器，例如，从命令行，您可以 re-use 它而无需停止和重新启动。 Select 您在“启动前”区域中的捆绑程序，然后单击“删除”。
我无法在 WebStorm 中调试我的 react native / expo 应用程序，但我可以在 Visual Studio 代码中调试。 我有一个本机应用程序，我可以使用 expo 成功 运行。我根据这个网站上的信息设置配置：
https://blog.jetbrains.com/webstorm/2018/02/webstorm-2018-1-eap-181-3263/#debugging-expo
当我单击“运行”或“调试”并关闭“远程调试 JS”时，捆绑器会构建一个 JS 捆绑包并在我的设备上启动该应用程序。 但是一旦我打开“远程调试 JS”，bundler 只会说：
Starting custom debugger by executing: : [my working directory] [my working directory again]
并且永远不会继续构建 JS 包。 片刻之后，红屏出现在设备上，上面写着：
Unable to connect with remote debugger
Timeout while connecting to remote debugger
onFailure DevSupportManagerImpl.java:851
onFailure WebsocketJavaScriptExecutor.java:83
run WebsocketJavaScriptExecutor.java:142
handleCallback Handler.java:790
dispatchMessage Handler.java:99
...
打包程序除了上面的消息外什么也没说。 一旦我关闭远程调试，捆绑器就会再次开始构建并以
结束“构建 JavaScript 捆绑包：在 ...ms 内完成”
像往常一样，但设备再次显示带有上述消息的红色屏幕，或者只显示常规的白色屏幕，底部有一条消息“正在下载 JavaScript 捆绑包 100， 00%”。我要么必须在 WebStorm 中停止并重新启动，要么必须关闭 expo 应用程序并重新打开它。无论哪种方式都会使应用程序在我的设备上重新启动。
这是我第一次使用javascript，react native，expo，所以我不确定，但应该可以直接在WebStorm中调试，对吧？如前所述，在 Visual Studio 代码中，包括调试在内的所有内容都可以正常工作，所以我认为代码中没有任何内容。也许这里有人知道问题出在哪里？
节点-v:v11.6.0 react-native -v: react-native-cli: 2.0.1, react-native: 0.57.1
任何帮助将不胜感激！提前致谢！
问题已在 WEB-35719 跟踪，请关注它以获取更新
证明
指南
自从您尝试后，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 和 select React Native。 Run/Debug 配置：React Native 打开。
选择是否要 WebStorm 为您构建和启动应用程序：
Select 如果您是第一次启动您的应用程序，或者如果您自上次 运行.
如果您的应用程序使用 Expo，请清除该复选框，因为此捆绑程序会自行处理流程。
如果您select勾选了“构建并启动”复选框，请选择目标平台，Android 或 iOS。根据您的选择，WebStorm 将 运行 捆绑器与 react-native run-ios 或 react-native run-android.
可选地，键入要传递给 React Native 的参数，例如，通过 ‑‑simulator 标志指定模拟器类型：‑‑simulator="iPhone 4s".
在Bundler host字段中，指定React Native bundler所在的主机运行s，默认值为localhost。
如果您使用的是 Expo，请更改默认的捆绑器主机以确保成功连接调试器。此连接可能会失败，因为默认情况下 WebStorm 使用 localhost 开始调试，而 Expo 需要 127.0.0.1 或外部 IP 地址，具体取决于 Metro bundler 配置的连接字段中的 selected。有关详细信息，请参阅调试使用 Expo 的 React Native 应用程序。
在Bundler port 字段中，指定React Native bundler 运行s 所在的端口，默认选择8081，更多信息请访问React Native 官网。
选择要使用的 Node.js 解释器。这可以是本地 Node.js 解释器或 Windows 子系统上的 Node.js Linux.
指定react-native-cli 的路径和应用程序的工作目录。或者，键入 react-native run-android 或 react-native run-ios.
的环境变量默认情况下，当您调用 run/debug 配置时，WebStorm 会自动启动 React Native 捆绑器。如果您已经从 WebStorm 外部启动了捆绑器，例如，从命令行，您可以 re-use 它而无需停止和重新启动。 Select 您在“启动前”区域中的捆绑程序，然后单击“删除”。