React Native非常新 - 在Visual Studio代码中调试？

Question

我跟着调试中VSCode按

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

我重视我的Nexus 6P与我MBP2015 USB电缆的指示，使开发人员选项和USB调试，但是当我在VSC选择调试机器人，我得到这

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

我重视的这个画面，太。

如果我想在iOS模拟器调试，我在VSC选择Debug 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代码中的代码执行方式进行操作？

这里是我的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

发现，使用Chrome允许调试，跟踪，断点，试了一下，做工不错

Answer 2

有几种方法使用VS代码

1. 运行打包和调试器使用VS代码，使断点调试：调试的Android/iOS的调试
2. 使用指数
3. 附加到包装商

据我的经验，vs代码中最稳定的调试是使用第三个选项Attach to packager。

要使用此功能，您可以启动外部打包程序（即从命令行），并将调试程序附加到该打包程序端口。

{ 
     "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，唯一的选择是通过使用指数中的调试，或者您仍然可以使用与包装方法相同的方法像之前一样。