VSCodeでReactNativeをデバッグする

目標

VSCodeでReactNativeのアプリをデバックできるようにする。

環境

• OS
  • macOS Catalina 10.15.6
• VSCode: 1.49.2
• ReactNative: 0.63.3

VSCodeの設定

以下デバックに必要なExtensionsのインストールと、launch.jsonの編集が必要になります。

React Native Tools

React Native Tools – Visual Studio Marketplacehttps://marketplace.visualstudio.com

launch.json

{
  "configurations": [
    {
      "name": "Attach to packager",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "attach"
    },
  ]
}

デバック方法

1. ReactNativeのアプリを起動
2. デバック画面からlaunchを起動
3. ReactNativeDebugMenuからDebugを有効化
4. ブレークで止まった際にデバック画面を操作

確認している問題

• ReactNativeToolsのlaunch.jsonでattachではなくlaunchもあるが、launchだとリロードしても最新のコードが反映されない
  →これは上記のattachによる方法で迂回することができます

おわりに

上記方法にてVSCodeで、ReactNativeのアプリケーションがデバックできるようになります。
シミュレータだけでなく、実機でも同様にブレークを貼れるのでおすすめです。