Create-React-Appを使用したVSCodeデバッグ

Question

「Create-react-app」を使用して作成したReact-appをデバッグするためにVSコードを設定したいと思います。

私はこの構成しようとしました：私は 'preLaunchTask' を設定する必要があると思います...

を

Debugger listening on port 11198 
e:\form\src\index.js:1 
(function (exports, require, module, __filename, __dirname) { import React from 'react'; 
                  ^^^^^^ 

SyntaxError: Unexpected reserved word 

：

{ 
    "version": "0.1.0", 
    "configurations": [ 
     { 
      "name": "Launch node", 
      "type": "node", 
      "request": "launch", 
      "program": "${workspaceRoot}/src/index.js", 
      "cwd": "${workspaceRoot}", 
      "preLaunchTask": null, 
      "runtimeExecutable": null, 
      "runtimeArgs": [ 
       "--nolazy" 
      ], 
      "env": { 
       "NODE_ENV": "development" 
      }, 
      "sourceMaps": true, 
      "outFiles": [] 
     }, 
     { 
      "name": "Attach", 
      "type": "node", 
      "request": "attach", 
      "port": 9222, 
      "address": "localhost", 
      "restart": false, 
      "sourceMaps": false, 
      "localRoot": "${workspaceRoot}", 
      "remoteRoot": null 
     } 
    ] 
} 

を私は次のエラーをエラー取得いくつかのdistフォルダに 'outFiles'を貼り付けていましたが、どこを指すべきかわかりません。

私はアイデアに感謝します。 tnx

Answer 1

設定が正しくありません。それはする必要があります：

{ 
    "version": "0.2.0", 
    "configurations": [{ 
    "name": "Chrome", 
    "type": "chrome", 
    "request": "launch", 
    "url": "http://localhost:3000", 
    "webRoot": "${workspaceRoot}/src", 
    "userDataDir": "${workspaceRoot}/.vscode/chrome", 
    "sourceMapPathOverrides": { 
     "webpack:///src/*": "${webRoot}/*" 
    } 
    }] 
} 

は魔法のようにhttps://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-in-the-editor