当前位置 : 主页 > 网页制作 > React >

使用Create-React-App进行VSCode调试

来源:互联网 收集:自由互联 发布时间:2021-06-15
我想设置我的VS代码来调试使用’create-react-app’创建的React-app. 我试过这个配置: { "version": "0.1.0", "configurations": [ { "name": "Launch node", "type": "node", "request": "launch", "program": "${workspaceRoot}
我想设置我的VS代码来调试使用’create-react-app’创建的React-app.

我试过这个配置:

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

但我得到错误以下错误:

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

我想我需要将’preLaunchTask’设置为babel或将’outFiles’设置为某个dist文件夹,但我不知道我应该在哪里指出它.

我会感激你的想法.
TNX

您的配置不正确.它应该是:

{
  "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

网友评论