使用 vscode 调试器调试 React Native

Posted 2023-02-19

【中文标题】使用 vscode 调试器调试 React Native

【英文标题】：Debug React Native using vscode debugger

【发布时间】：2019-05-06 15:39:11

【问题描述】：

我需要在 VsCode 上调试我的 react-native 应用程序，而且我是响应原生开发的新手.. :) 我搜索并遵循不同的方法，但没有运气.. :( 首先，我遵循此方法https://medium.com/@tunvirrahmantusher/react-native-debug-with-vscode-in-simple-steps-bf39b6331e67 并遵循此方法https://www.youtube.com/watch?v=0_MnXPD55-E。但没有运气。

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

首先将 react 原生配置添加到 lunch.json。

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

“expoServerPort”：19001， “包装器端口”：19002， “packagerPid”：65931

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

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

然后在 vscode 调试选项上运行 Attach to packager 并启用

远程JS调试

关于在我真正的 android 设备上运行的本机应用程序。但是vscode调试点没有触发。

我试过之后

调试安卓

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

任何人都知道如何正确设置使用 vscode 进行反应本机应用程序调试，请给我指导... :) :) 谢谢。。

【参考方案1】：

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

我们还需要react native tools 扩展名，否则你会得到错误：The configured debug type "reactnative" is not supported。 这是我目前正在使用的launch.json，以防您需要它：

// Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ "name": "Debug Android", "program": "$workspaceRoot/.vscode/launchReactNative.js", "type": "reactnative", "request": "launch", "platform": "android", "sourceMaps": true, "outDir": "$workspaceRoot/.vscode/.react" , "name": "Debug ios", "program": "$workspaceRoot/.vscode/launchReactNative.js", "type": "reactnative", "request": "launch", "platform": "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.js", "type": "chrome", "request": "attach", "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" ]

【讨论】：

找到我丢失的部分..按照我所有的程序，然后重新加载应用程序.. :)

【参考方案2】：

对于仍然无法运行它的人。

为我解决的问题是：

起纱 关闭浏览器中的所有展览窗口。 在手机上启动应用程序。 在您的手机上启动应用程序并摇动它，直到您进入调试器菜单和Disable Debugging。 进入./expo/packager-info.json。复制打包程序端口。 粘贴到您根据 youtube 上的上述教程创建的文件中 ./vscode/settings.json 在 VSCode 中按 F5 摇动手机以启用调试。

【参考方案3】：

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

您可以在my another answer中详细阅读所有说明。