使用vscode调试器调试React Native

Question

我需要在VsCode上调试我的反应原生应用程序，我是新的反应原生开发...：）我搜索并遵循不同的方法，但没有运气...：（首先，我遵循此方法https://medium.com/@Tunvirrahmantushs/react-nate-debug-with-vscode-in-imple-steps-bf39b6331e67并遵循此方法https://www.youtube.com/watch?v=0_MnXPD55-E也。

让我解释一下我的调试过程。

>

首先将反应本机配置添加到lunch.json.

像这样将packager.info.json添加到. exo目录

{"expoServerPort"： 19001，"PackagerPort"： 19002，"PackagerPid"： 65931}

然后像这样将settings.json添加到. vscode目录

{
    "react-native": {
        "packager": {
            "port" : 19002
        }
    }
}

然后在vscode调试选项上运行附加到打包器，并启用

远程JS调试

在反应本机应用程序运行在我真正的android设备.但vscode调试点不触发。

在我尝试之后

调试Android

选项vscode调试器.然后http://localhost:8081/debugger-ui/窗口弹出.但是vscode调试器点没有击中。

有谁知道如何正确设置react native app并使用vscode进行调试吗请给我一些指导…：）：）非常感谢。

Answer 1

您可以在VS代码上使用React Native Tools扩展（由Microsoft提供），以便为React Native应用程序启用调试（就像任何其他IDE一样，而不是Chrome）。

你可以在我的另一个答案中详细阅读所有说明。

Answer 2

对于仍有运行问题的人。

对我来说，解决这个问题的办法是：

1. 纱线启动
2. 关闭浏览器中的所有世博会窗口。
3. 在手机上启动应用程序。
4. 在您的手机上启动应用程序并摇动它，直到您进入调试器菜单并禁用调试。
5. 进入./exo/packager-info.json.复制打包器端口。
6. 粘贴到您在youtube上根据上述教程创建的文件中。/vscode/settings.json
7. 在VSCode中按F5
8. 摇动你的手机来启动调试。

Answer 3

使用附加到打包器配置并关闭localhost:8081/debugger-ui选项卡，因为如果它保持打开状态，那么vscode将无法连接到调试器。现在再试一次，单击vscode调试器中的绿色播放按钮并重新加载应用程序。

我们还需要react native工具扩展，否则会出现错误：配置的调试类型“react native”不受支持。这是我的发布会。我目前正在使用的json，以备您需要：

{//使用IntelliSense了解可能的属性//悬停查看现有属性的描述//有关更多信息，请访问：https://go.microsoft.com/fwlink/?linkid=830387“版本”：“0.2.0”，“配置”：[{“名称”：“调试Android”，“程序”：“${workspaceRoot}/.vscode/launchReactNative.js”，“类型”：“reactnative”，“请求”：“launch”，“platform”：“Android”，“sourceMaps”：true，“outDir”：“${workspaceRoot}/.vscode/.react”}，{“名称”：“调试iOS”，“程序”：“${workspaceRoot}/.vscode/launchReactNative.js”，“类型”：“ReactNational”，“请求”：“launchReactNative”，“平台”：“iOS”，“sourceMaps”：true，“outDir”：“${workspaceRoot}/.vscode/.react”}，{“name”：“Attach to packager”，“program”：“${workspaceRoot}/.vscode/launchReactNative.js”，“type”：“reactnative”，“request”：“Attach”，“sourceMaps”：true，“outDir”：“${workspaceRoot}/.vscode/.react”}，{“name”：“Chrome Attach to packager”，“program”：“${workspaceRoot vscode/launchReactNative.”，“port”：9222，“sourceMaps”：true，“outDir”：“${workspaceRoot}/.vscode/.react”}，{“name”：“Debug in Exponent”，“program”：“${workspaceRoot}/.vscode/launchReactNative.js”，“type”：“reactnative”，“request”：“launch”，“platform”：“Exponent”，“sourceMaps”：true，“outDir”：“${workspaceRoot}/.vscode/.react”}