VSCode 使用 Create-React-App 调试
VSCode debugging with Create-React-App
我想设置我的 VS 代码来调试我使用 'create-react-app' 创建的 React 应用程序。
我试过这个配置:
{
"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 文件夹,但我不知道我应该将它指向哪里。
我将不胜感激。
发送
您的配置不正确。应该是:
{
"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://create-react-app.dev/docs/debugging-tests/#debugging-tests-in-visual-studio-code
我想设置我的 VS 代码来调试我使用 'create-react-app' 创建的 React 应用程序。
我试过这个配置:
{
"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 文件夹,但我不知道我应该将它指向哪里。
我将不胜感激。 发送
您的配置不正确。应该是:
{
"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://create-react-app.dev/docs/debugging-tests/#debugging-tests-in-visual-studio-code