在 VSCode 中的 jsx 文件上添加断点

Question

我已经设置了一个框架项目来与 web-dev-server 和热重载做出反应。我还创建了一个 dev-server.js 文件到运行所有带有节点的配置，这样我就可以从 VSCode 启动调试会话，如下所示：我在这个 repo 中有一些代码：Learn-React 当我运行命令

时一切正常

>node dev-server

我还在 vscode 中创建了一个发布，如下所示：

 {
    "version": "0.1.0",
    // List of configurations. Add new configurations or edit existing ones.
    "configurations": [
        {
            "name": "Launch server.js",
            "type": "node",
            "program": "server.js",
            "cwd": ".",
            "runtimeExecutable": null,
            "runtimeArgs": ["--nolazy"],
            "env": {
                "NODE_ENV": "development"
            },
            "sourceMaps": true,
            "outDir": "public"
        }
    ]
}

我想在 jsx 文件的 VSCode 中添加一个断点，以便我可以在 VSCode 中进行调试。当我从命令行开始并在代码中添加 "debugger;" 表达式时，它正在工作。它在 chrome 开发工具

中的断点处停止

问题 : 如何在 jsx 文件中添加断点并在 VSCode

中进行调试

Answer 1

目前无法从 vscode 内部调试 webpack-dev-server 捆绑的 jsx。使用 chrome 调试器可能是可行的，但这不适用于当前的调试器版本，因为 webpack-dev-server 将捆绑的 js 文件保存在内存中，而调试器正在寻找磁盘上的文件。

但好消息是 webpack-dev-server 很快就会被 vscode chrome 调试器支持：https://github.com/Microsoft/vscode-chrome-debug/issues/40

要将 chrome 调试器与 webpack 结合使用，您可以在 tasks.json 中创建 webpack 任务并在 launch.json

中设置 preLaunchTask 属性

{
    "version": "0.2.0",
    "configurations": [
        {
                "name": "Debug",
                "type": "chrome",
                "request": "launch",
                "url": "http://localhost:3000",
                "webRoot": "./src",
                "preLaunchTask": "webpack dev",
                "sourceMaps": true
            }
    ]
}

tasks.json 将如下所示：

{
    "version": "0.1.0",
    "command": "node",
    "isShellCommand": true,
    "echoCommand": true,
    "suppressTaskName": true,
    "tasks": [
        {
            "args": [
                "server.js" 
            ],
            "taskName": "webpack dev"
        },
        {
            "args": [
                "${workspaceRoot}\node_modules\webpack\bin\webpack.js",
                "--config",
                "${workspaceRoot}\webpack.production.config.js",
                "--progress",
                "--profile",
                "--colors"
            ],
            "taskName": "webpack dist",
            "isBuildCommand": true
        }
    ]
}

更新 2015-12-07

现在可以使用 webpack-dev-server 和 vscode-chrome-debugger 调试 .js 文件。 .jsx 文件支持将在未来的版本中添加 https://github.com/Microsoft/vscode-chrome-debug/issues/62

更新 2015-12-09

可在此处找到 vscode 的简单 React 热样板文件：https://github.com/skolmer/react-hot-boilerplate-vscode

更新 2016-04-25

将样板项目更新为 React Hot Loader 3.0

Answer 2

我一直在努力让 github 项目正常运行，但它没有达到我的断点。我在这里有一个视频（如果你能处理我的摸索），我确保所有东西都已安装，设置一些断点，按照 github 自述文件的说明进行操作。如果您有任何建议，我们将不胜感激。

https://www.youtube.com/watch?v=gIo7RXZwgHI&feature=youtu.be

在 VSCode 中的 jsx 文件上添加断点

Adding Breakpoints on jsx files in VSCode

debugging

visual-studio-code