React Native非常新 - 在Visual Studio代碼中調試？

我跟着調試中VSCode按React Native非常新 - 在Visual Studio代碼中調試？

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" 
     } 
    ] 
}

來源

2017-10-09 pixel

發現，使用Chrome允許調試，跟蹤，斷點，試了一下，做工不錯

來源

2017-10-15 18:40:12 pixel

有幾種方法使用VS代碼

運行打包和調試器使用VS代碼，使斷點調試：調試的Android/iOS的調試
使用指數
附加到包裝商

據我的經驗，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，唯一的選擇是通過使用指數中的調試，或者您仍然可以使用與包裝方法相同的方法像之前一樣。

來源

2017-10-10 05:46:15

嗨Ganesh神，這聽起來很複雜。「開始外部包....」。 ??? – pixel

React Native非常新 - 在Visual Studio代碼中調試？

回答

相關問題