[英]How to debug react native apps in visual studio code?
I am using visual studio code IDE to develop react native app and am not using expo library.我正在使用 Visual Studio 代码 IDE 来开发本机应用程序,并且没有使用 expo 库。
Before that I was working on the android studio, debugging in that is straightforward and simple.在此之前,我在 android studio 工作,在那里进行调试非常简单明了。
Now for react-native, I wanted to know how to debug my app using visual studio code IDE?现在对于 react-native,我想知道如何使用 Visual Studio 代码 IDE 调试我的应用程序?
If you want to debug the app in VS Code itself, like in other IDEs.如果您想在 VS Code 本身中调试应用程序,就像在其他 IDE 中一样。 Then on approach can be to follow the following steps:
然后在方法上可以按照以下步骤进行:
React Native Tools
Extension (provided by Microsoft
) to VS Code.React Native Tools
Extension(由Microsoft
提供)安装到 VS Code。 This is a nice add on to VS Code's capabilities for React Native.这是对 VS Code 的 React Native 功能的一个很好的补充。
If it initially says No Configuration
then you can click on Add Configuration and then choose React Native option.如果它最初显示
No Configuration
那么您可以单击 Add Configuration,然后选择 React Native 选项。
Launch configuration
added, then you can click on Add Configuration button then you will see more options related to React Native.Launch configuration
,那么您可以单击 Add Configuration 按钮,然后您将看到更多与 React Native 相关的选项。 You can add configurations for React Native: Attach to Packager
, React Native: Debug to Android
, React Native: Debug to iOS
in your launch.json
file.您可以在
launch.json
文件中为React Native: Attach to Packager
、 React Native: Debug to Android
、 React Native: Debug to iOS
添加配置。 It is present in .vscode
folder.它存在于
.vscode
文件夹中。
Attach to Packager
.Attach to Packager
。Debug JS Remotely
.Debug JS Remotely
。 Now your breakpoints should be working.现在你的断点应该可以工作了。 Similarly if your app wasn't working already then you can go for
Debug Android
or Debug iOS
accordingly.同样,如果您的应用程序尚未运行,那么您可以相应地进行
Debug Android
或Debug iOS
。
Step1: Open app Setting in your mobile by shaking your mobile or by typing this command in your machine if your running android.步骤1:通过摇动手机或在您的机器中输入此命令(如果您正在运行Android)打开手机中的应用设置。
adb shell input keyevent 82
Step2: Select Debug JS Remotely which is the second option. Step2:选择Debug JS Remotely ,这是第二个选项。 Step3: In your Browser type Url
http://localhost:8081/debugger-ui/
Step4: Again Open App Setting by shaking or running the command shown in step 1 and select Reload option which is first option步骤 3:在您的浏览器中输入 Url
http://localhost:8081/debugger-ui/
步骤 4:再次通过摇动或运行步骤 1 中显示的命令打开应用设置,然后选择重新加载选项,这是第一个选项
Now You can get all console logs in the browser and also you can debug your app remotely by putting breakpoints and analyze the values step by step.现在您可以在浏览器中获取所有控制台日志,还可以通过放置断点并逐步分析值来远程调试您的应用程序。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.