Question

我已经设置了一个框架项目，用于响应web-dev-server和热重载。我还创建了一个dev-server.js文件来运行所有这个配置节点，以便我能够从VSCode启动调试会话，如下所示：我在这个仓库中有一些代码：Learn-React 当我运行命令时，一切正常

[dbo].[MyTable]

我还在vscode中创建了一个如下所示的启动：

>node dev-server

我想在jsx文件的VSCode中添加一个断点，以便我可以在VSCode中调试。当我从命令行开始添加“调试器”时，它正在工作表达式在代码中。它在chrome dev工具中的断点处停止

问题：如何在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的简单反应热样板：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文件上添加断点

2 个答案: