使用vscode调试器调试React Native [英] Debug React Native using vscode debugger

问题描述

我需要在VsCode上调试我的react-native应用程序，并且我是新来响应本机开发的.. :)我搜索并遵循不同的方法，但是没有运气.. :(首先，我遵循此方法 https://medium.com/@tunvirrahmantusher/react-native-debug-with-vscode-in-simple-steps-bf39b6331e67 并遵循此方法

I need to debug my react-native app on VsCode and I'm new to react native development.. :) I search and follow different methods but no luck.. :( First I follow this methods https://medium.com/@tunvirrahmantusher/react-native-debug-with-vscode-in-simple-steps-bf39b6331e67 and follow this methord https://www.youtube.com/watch?v=0_MnXPD55-E also. but no luck.

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

Let me explain my debug procedure.

1. 首先将react本机配置添加到Lunch.json.

1. First add react native configurations to lunch.json.

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

Add packager.info.json to .expo directory like this

{"expoServerPort":19001，"packagerPort":19002，"packagerPid":65931}

{ "expoServerPort": 19001, "packagerPort": 19002, "packagerPid": 65931 }

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

Then add settings.json to .vscode directory like this

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

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

Then run Attach to packager on vscode debug options and enable

远程JS调试

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

on react native app running on my real android device. but vscode debugging point does not trigger.

我尝试过

调试Android

Debug Android

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

option vscode debugger. then http://localhost:8081/debugger-ui/ window is pop up. but vscode debugger point dose not hit.

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

Can anyone know how to setup react native app debugging with vscode properly please give me directions to do that... :) :) Thank you..

推荐答案

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

Use attach to packager config and close that localhost:8081/debugger-ui tab because if it remains open then vscode will not be able to connect to debugger. Now try again, click on green play button in vscode debugger and reload the app.

我们还需要 react native tools 扩展名，否则您将得到错误:不支持配置的调试类型"reactnative" .这是我目前正在使用的我的launch.json，以防您需要它:

We also need react native tools extension otherwise you will get error : The configured debug type "reactnative" is not supported. Here is my launch.json that i am using currently in case you need it :

{//使用IntelliSense了解可能的属性.//将鼠标悬停以查看现有属性的描述.//有关更多信息，请访问:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0"，配置":[{"name":"Debug Android"，"program":"$ {workspaceRoot}/.vscode/launchReactNative.js"，"type":活性"，"request":启动"，"platform":"android"，"sourceMaps":是的，"outDir":"$ {workspaceRoot}/.vscode/.react"}，{"name":"Debug iOS"，"program":"$ {workspaceRoot}/.vscode/launchReactNative.js"，"type":活性"，"request":启动"，"platform":"ios"，"sourceMaps":是的，"outDir":"$ {workspaceRoot}/.vscode/.react"}，{"name":附加到打包程序"，"program":"$ {workspaceRoot}/.vscode/launchReactNative.js"，"type":活性"，"request":"attach"，"sourceMaps":是的，"outDir":"$ {workspaceRoot}/.vscode/.react"}，{"name":"Chrome附加到打包程序"，"program":"$ {workspaceRoot}/.vscode/launchReactNative.js"，"type":"chrome"，"request":"attach"，端口":9222，"sourceMaps":是的，"outDir":"$ {workspaceRoot}/.vscode/.react"}，{"name":在指数中调试"，"program":"$ {workspaceRoot}/.vscode/launchReactNative.js"，"type":活性"，"request":启动"，"platform":指数"，"sourceMaps":是的，"outDir":"$ {workspaceRoot}/.vscode/.react"}]}

这篇关于使用vscode调试器调试React Native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！