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

Question

我已经设置了一个框架项目,用于响应web-dev-server和热重载.我还创建了一个dev-server.js文件来运行所有这个配置与节点,以便我能够从VSCode启动调试会话,如下所示:我有一些代码位于此repo中:学习 - 当我执行时,一切正常运行命令

>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中调试了.当我从命令行开始添加"调试器"时,它正在工作 表达式在代码中.它在chrome dev工具中的断点处停止

问题:如何在jsx文件中添加断点并在VSCode内部进行调试

Answer 1

目前无法调试webpack-dev-server从vscode内部捆绑的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