Question

我需要在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， “ packagerPort”：19002， “ packagerPid”：65931 }

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

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

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

远程JS调试

在我的实际android设备上运行的React本机应用程序上。但是vscode调试点不会触发。

我尝试过

调试Android

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

谁能知道如何使用vscode正确设置响应本机应用调试的方法，请给我指导以完成此操作... :) :) 谢谢你。

Answer 1

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

这是我当前正在使用的我的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" } ] }

Answer 2

针对仍然无法运行的人们。

对我来说固定的是：

纱线开始
关闭浏览器中的所有博览会窗口。
在手机上启动该应用。
在手机上启动该应用，然后将其摇晃，直到进入调试器菜单和Disable Debugging。
进入./expo/packager-info.json。复制打包程序端口。
将您从上述教程在youtube ./vscode/settings.json上创建的文件粘贴到
在VSCode中按F5键
摇动手机以启用调试。

Answer 3

您可以在VS Code上使用React Native Tools扩展名（由Microsoft提供）来为React Native应用启用调试功能（就像其他任何IDE，不是Chrome一样）。

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

使用vscode调试器调试React Native

3 个答案: