React Native的新手-在Visual Studio Code中进行调试？

Question

我按照VSCode中的说明进行了调试

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

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

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

我也附上了这张照片。

如果要在IOS模拟器上进行调试，请选择“在VSC中调试IOS”，但随后出现此错误并且模拟器未启动

[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'"

我在这里很少看到有关类似问题的信息，但没有一个得到答复，或者不是像我一样的同一个问题。

如何使用断点调试尽可能简单的React Native应用程序，以便我可以跟踪代码在Visual Studio Code中的执行方式？

这是我的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"
        }
    ]
}

Answer 1

按着这些次序

• 安装扩展 React-native Full Pack

• 创建 Launch.json

• 选择调试 iOS或Android。添加断点并享受。

注意：请确保您启用了远程调试 JS

现在喝杯咖啡，享受吧！

Answer 2

有几种方法可以使用 vs code 启用断点调试

1. 使用 vs 代码运行打包器和调试器：调试 Android/调试 iOS
2. 使用指数
3. 附加到包装器

就我的经验而言，vs code 中最稳定的调试是使用第三个选项附加到打包程序。

要使用它，您可以启动一个外部打包器（从命令行 ie）并将调试器附加到该打包器端口。

    {
        "name": "Attach to packager",
        "program": "${workspaceRoot}/.vscode/launchReactNative.js",
        "type": "reactnative",
        "request": "attach",
        "port": 19002, // change this with your port
        "sourceMaps": true,
        "outDir": "${workspaceRoot}/.vscode/.react"
    },

其他 2 个选项总是导致多实例打包程序并导致打包程序错误，最终花费时间杀死端口。至少对我来说，使用 attach to packager 要舒服得多。

如果您使用指数创建应用程序，那么您将无法运行调试 Android/调试 iOS，唯一的选择是使用指数中的调试，或者您仍然可以使用与以前相同的方法附加到打包程序。

Answer 3

有一种方法只需单击一下按钮即可完成。在模拟器启动并且打包器已经运行后，调试器将附加到打包器。像这样配置launch.json文件：

  "configurations": [
    {
      "name": "Debug",
      "program": "${workspaceRoot}/.vscode/launchReactNative.js",
      "type": "reactnative",
      "request": "attach",
      "sourceMaps": true,
      "outDir": "${workspaceRoot}/.vscode/.react",
      "port": "8081",
      "address": "localhost",
      "preLaunchTask": "npm: debug:dev"
    },
  ]

在package.json 中，您只需要添加新脚本：

  "scripts": {
    "debug:dev": "react-native run-ios --scheme 'My project scheme' --configuration 'Debug' --simulator 'iPhone 8'",

Answer 4

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