React Native 非常新 - 在 Visual Studio Code 中调试? [英] Very new to React Native - Debugging in Visual Studio Code?

问题描述

我按照说明在 VSCode 中进行调试

I followed the instructions for debugging in VSCode as per

https://github.com/Microsoft/vscode-react-native

我用 MBP2015 的 USB 电缆连接了我的 Nexus 6P 并启用了开发人员选项和 USB 调试，但是当我在 VSC 中选择调试 Android 时，我得到了这个

I attached my Nexus 6P with USB cable with my MBP2015 and enabled Developer Options and USB Debugging but when I select Debug Android in VSC, I get this

[Error] "Could not debug. Android project not found."

我也附上了这张照片.

如果我想在 IOS 模拟器上调试，我在 VSC 中选择了 Debug IOS 但是我得到这个并且模拟器没有启动

If I want to debug on IOS simulator, I select Debug IOS in VSC but then I get this and simulator is not started

[vscode-react-native] Prewarming bundle cache. This may take a while ...
[vscode-react-native] Building and running application.
[vscode-react-native] Executing command: react-native run-ios --simulator
Scanning 772 folders for symlinks in /Users/me/reactnativework/my-app/node_modules (4ms)
ENOENT: no such file or directory, uv_chdir
[Error] "Could not debug. Error while executing command 'react-native run-ios --simulator': Error while executing command 'react-native run-ios --simulator'"

我在这里看到的关于类似问题的帖子很少，但没有一个得到回答或与我遇到的问题不同.

I have seen few posts here about similar problem but none are answered or are not same issue like I have.

如何使用断点调试最简单的 React Native 应用程序，以便跟踪代码在 Visual Studio Code 中的执行情况?

How do I debug a simplest possible React Native app using break points so I can follow how code executes in Visual Studio Code?

这是我的launch.json

Here is my 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": "Debug in Exponent",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "exponent",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        }
    ]
}

推荐答案

发现使用Chrome可以调试、跟踪、断点，试了一下，效果不错

Found out that using Chrome allows debugging, tracing, breakpoints, tried it, working good

这篇关于React Native 非常新 - 在 Visual Studio Code 中调试?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！