web-dev-qa-db-ja.com

React Native-Visual Studio Codeでのデバッグ？

私はVSCodeでデバッグするための指示に従いました

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

MBP2015でUSBケーブルを使ってNexus 6Pを接続し、開発者向けオプションとUSBデバッグを有効にしましたが、Debug Androidを選択すると、これが表示されます

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

私はここで同様の問題についていくつかの投稿を見ましたが、どれも答えられていないか、私のように同じ問題ではありません。

Visual Studioコードでコードがどのように実行されるかを追跡できるように、ブレークポイントを使用して可能な限り単純なReactネイティブアプリをデバッグするにはどうすればよいですか？

これが私の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"
        }
    ]
}
debuggingreact-nativevisual-studio-code
5
pixel

次の手順に従ってください

  • 拡張機能をインストールReact-native Full Pack

enter image description here

  • Launch.jsonを作成する

enter image description here

  • Debug iOSまたはAndroidを選択します。ブレークポイントを追加してお楽しみください。

enter image description here

注：JSをリモートでデバッグするを有効にしてください

enter image description here

今すぐコーヒーを飲んでお楽しみください！

4
Tunvir Rahman Tusher

Vsコードを使用してブレークポイントのデバッグを有効にする方法はいくつかあります

  1. Vsコードを使用してパッケージャーとデバッガーを実行します：Androidのデバッグ/ iOSのデバッグ
  2. 指数を使用する
  3. パッケージャーに添付

私の経験では、vsコードでの最も安定したデバッグは、3番目のオプションである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つのオプションは、常にマルチインスタンスパッケージャを引き起こし、パッケージャエラーを引き起こし、ポートを殺すことに時間を費やすことになります。少なくとも私にとっては、パッケージャへのアタッチを使用する方がはるかに快適です。

指数を使用してアプリを作成すると、Androidのデバッグ/ iOSのデバッグを実行できなくなります。唯一のオプションは、指数でデバッグを使用するか、以前と同じ方法でパッケージャーにアタッチすることです。

4
Ganesh Cauda

ボタンを1回クリックするだけでそれを行う方法があります。デバッガーは、シミュレーターが開始され、パッケージャーが既に実行されている後に、パッケージャーに接続します。次のように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'",
4
big-toni

別の方法は、React Native Tools VSコードのMicrosoftによって提供される拡張機能は、ChromeではなくVSコード自体の中でネイティブアプリの反応をデバッグします。

ここに私の答え ですべての指示を詳細に確認してください。

2
gprathour