web-dev-qa-db-ja.com

vscode debug ES6アプリケーション

VSCode 0.5.0があります。 compilerOptionsフラグを「ES6」に設定すると、エディターはES6コードを正しいものとして認識し始めました。 babelがインストールされています。私のMochaテストはbabelコンパイラを使用しており、テストに合格しています。 babel-nodeで起動すると、アプリはコマンドラインから問題なく実行されます。 VSCode内からアプリをデバッグすると、ES6サポートなしで起動し、ES6構文の問題でアプリが失敗します。電源を入れ忘れたデバッグ設定はありますか？

node.jsdebuggingecmascript-6babeljsvisual-studio-code
22
Jim Argeropoulos

デフォルトでは、VSCodeは--debug-brkオプションのみでノードを起動します。これは、ES6サポートを有効にするのに十分ではありません。 「babel-node」がノードに渡すオプションを見つけることができる場合、VSCode起動構成で（runtimeArgs属性を使用して）同じオプションを指定できます。しかし、これはbabel-nodeがES6コードを実行する前にトランスコードする問題を解決しません。

または、起動設定の「runtimeExecutable」を「babel-node」に設定してみることもできます。このアプローチは他のノードラッパーで動作しますが、それがbabel-nodeで動作することを確認していません。

3番目のオプション（動作するはずです）は、VSCodeの接続モードを使用することです：この起動には、コマンドラインから '--debug'オプションを指定してbabel-nodeを起動します。ポート番号を印刷する必要があります。次に、そのポートを使用してVSCodeで「接続」起動構成を作成します。

6
Andre Weinand

VSCodeデバッガーをBabel 6以降で動作させる方法は次のとおりです。

最初に依存関係をローカルにインストールします。

$ npm install babel-cli --save
$ npm install babel-preset-es2015 --save

次にbabel-nodeを実行します。

$ node_modules/babel-cli/bin/babel-node.js --inspect --presets es2015 -- server.js --inspect

デフォルトでは、デバッガーはポート5858でリッスンするため、Attach構成のlaunch.jsonでポートが一致することを確認します。

{
  "name": "Attach",
  "type": "node",
  "request": "attach",
  "port": 5858
}

VSCodeでデバッガーをアタッチします。

  • デバッグ構成がAttachではなくLaunchに設定されていることを確認してください
  • と走る F5

Nodemon

必須ではありませんが、nodemonを使用してサーバーを再起動せずにコードの変更を取得する場合は、次の操作を実行できます。

Nodemonがインストールされていることを確認します。

$ npm install nodemon --save-dev

サーバーを実行する

$ node_modules/.bin/nodemon node_modules/babel-cli/bin/babel-node.js --inspect --presets es2015 -- server.js --inspect

最後に、上記のようにデバッガを接続します。

19
Johnny Oshika

babel-cliプロジェクトにローカルモジュールとしてインストールすると、次のように動作します。

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/node_modules/babel-cli/bin/babel-node.js",
            "stopOnEntry": false,
            "args": [
                "${workspaceRoot}/server.js"
            ],
...
8
Craig McKenna

あなたが試すことができます babel-register（必要に応じて他のコンパニオンバベルモジュールも必要です）：

npm install --save-dev babel-register

とともに launch.jsonこれらの行に沿った構成：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/index.js",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy",
                "--require",
                "babel-register"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "console": "internalConsole",
            "sourceMaps": true,
            "outFiles": [
            ]
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outFiles": [],
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        },
        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "processId": "${command.PickProcess}",
            "port": 5858,
            "sourceMaps": false,
            "outFiles": []
        }
    ]
}

これは、 vscode-debug-nodejs-es6 に大まかに基づいており、babel-registerランタイム引数が追加されています。

8
songololo

バベル+ノードモン

VS Codeターミナルで、--inspect引数：

nodemon --inspect --watch src --exec node_modules/.bin/babel-node --presets react,es2015 src/server.js

他の行の中で、デバッガーがリッスンしているポートが表示されます。

...
Debugger listening on port 9229
...

次のデバッグ構成を作成します。

{
    "type": "node",
    "request": "attach",
    "name": "Attach to Port",
    "address": "localhost",
    "port": 9229
}

デバッガーを起動し、すべてがうまくいった場合、出力ターミナルに表示されます：

Debugger attached.

これから、アプリケーションをデバッグできます。

6
Luca Fagioli

それを行うには2つの方法があります。

Npmコマンドプロンプトを使用した最初のオプション

Package.jsonファイルで、babelを実行するビルドコマンドを作成します

{
  "scripts": {
    "build": "babel src --out-dir dist --watch --source-maps"
  },
  "devDependencies": {
    "babel-cli": "^6.23.0",
    "babel-preset-es2015-node6": "^0.4.0",
    "eslint": "^3.16.0"
  }
}

Launch.jsonで次のコードを入力します。

{
  "configurations": [
    {
      "name": "Launch",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/src/index.js",
      "stopOnEntry": false,
      "args": [],
      "cwd": "${workspaceRoot}",
      "runtimeArgs": [
        "--nolazy"
      ],
      "sourceMaps": true,
      "outFiles": [
        "${workspaceRoot}/dist/**/*.js"
      ]
    }
  ]
}

Cmdウィンドウを開き、package.jsonファイルに移動して実行します。

npm run build

VSコードを開き、コードを実行します。実行され、すべてのブレークポイントで停止します。ソースマップが生成され、VSがソースマップをコードにマップする方法を知っているために機能する理由。

VS Codeタスクを使用する2番目のオプション：

VS Codeで次のタスク（Ctrl + Shift + P）を追加し、「Tasks：Configure Task Runner」と入力します。

Tasks.jsonファイルに次のコードを追加します

{
  "version": "0.1.0",
  "command": "${workspaceRoot}/node_modules/.bin/babel",
  "isShellCommand": true,
  "tasks": [
    {
      "taskName": "watch",
      "args": [
        "src",
        "--out-dir",
        "dist",
        "--watch",
        "--source-maps"
      ],
      "suppressTaskName": true,
      "isBuildCommand": true
    }
  ]
}

タスクを実行しますが、Ctrl + Shift + B（ビルドコマンド）を押すと、コードを実行およびデバッグできます。 VSコードは、npmがステップ1で行っていることと同じことを行います。

また、次のように.babelrc（プロジェクトのルートにある）ファイルでbabelを構成する必要があります。

{
  "presets": [
    "es2015-node6"
  ]
}

およびjsconfig.json（プロジェクトのルートにあります）

{
  "compilerOptions": {
    "target": "ES6"
  },
  "include": [
    "src/**/*"
  ]
}
1
Vlad Bezden

babel-node＆vs code attach

  1. package.jsonでnpmスクリプトを設定します：

    "scripts": {
    "debug": "babel-node --debug-brk demo.js --presets es2015,stage-2"
}

  2. コードデバッグ構成を追加します。

    {
    "name": "Attach",
    "type": "node",
    "protocol": "legacy",
    "request": "attach",
    "port": 5858
}
0
承彬熊

Bael-nodeを使用してトランスコンパイルする場合は、スクリプトに「--inspect-brk」を追加する必要があります。これにより、ブレークポイントに到達したときにスクリプトが壊れる可能性があります。

例：

"start": "babel-node --inspect-brk app.js --presets es2015,stage-2"

npm run startを使用して実行すると、デバッガーが起動し、コンソールで次のように表示されます。

Debugger listening on ws://127.0.0.1:9229/cf72a33c-ab38-4798-be5e-8b8df072f724 For help see https://nodejs.org/en/docs/inspector

これは、デバッグプロセスが開始されたことを示しており、ポート＃9229で接続できます。

ここで、このプロセスにアタッチするvs-codeの次のデバッガー構成を追加する必要があります：（launch.json内）

{ "version": "0.2.0", "configurations": [ { "name": "Attach to Process", "type": "node", "request": "attach", "port": 9229 } ] }

保存した後、「デバッグの開始」ボタンをクリックして、以前にノードによって開始されたプロセスにアタッチします。これについてもっと読むことができます こちら

0
Blaze

これが私の構成であり、うまく機能します！ VSCodeデバッグ、mocha 6.1.4、ノード：v8.16.0、およびBabelバージョン6を使用しています。

必ずbabel-registerとbabel-polyfillをruntimeArgsにロードしてください。そうしないと、regeneratorRuntime is not definedが取得されます！

{
    "type": "node",
    "request": "launch",
    "name": "Mocha test debug",
    "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/mocha",
    "console": "integratedTerminal",
    "internalConsoleOptions": "neverOpen",
    "protocol": "inspector",
    "stopOnEntry": false,
    "runtimeArgs": [
        "--nolazy",
        "--require",
        "babel-register",
        "--require",
        "babel-polyfill",
        "tests/*.js"
    ],
    "sourceMaps": true
}
0
helsont