Adding Breakpoints on jsx files in VSCode

Question

I have setup a skeleton project for react with web-dev-server and hot reload. I have also created a dev-server.js file to run all this config with node so that I am able to start a debug session from VSCode like so : I have some code located in this repo : Learn-React everything works fine when I run the command

>node dev-server

I also created a launch in vscode that looks like this:

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

I would like to add a breakpoint in VSCode on a jsx file so that I could debug inside VSCode. it's working when I start from command line an add a "debugger;" expression in the code. it stops on breakpoint in chrome dev tool

Question : How could I add a breakpoint to jsx files and debug inside VSCode

Answer 1

It is currently not possible to debug jsx that is bundled by webpack-dev-server from inside vscode. It could be possible with chrome debugger but this doesn't work with the current debugger version because webpack-dev-server is keeping the bundled js files in memory while the debugger is looking for the files on disk.

but the good news is webpack-dev-server will soon be supported by vscode chrome debugger: https://github.com/Microsoft/vscode-chrome-debug/issues/40

---

to use chrome debugger in combination with webpack you can create webpack tasks in tasks.json and set the preLaunchTask property in launch.json

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

tasks.json will look like this:

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

---

UPDATE 2015-12-07

It is now possible to debug .js files with webpack-dev-server and vscode-chrome-debugger. .jsx file support will be added in a future release https://github.com/Microsoft/vscode-chrome-debug/issues/62

---

UPDATE 2015-12-09

A simple react hot boilerplate for vscode can be found here: https://github.com/skolmer/react-hot-boilerplate-vscode

---

UPDATE 2016-04-25

Updated boilerplate project to React Hot Loader 3.0

Answer 2

I've been trying to get the github project working, but it is not hitting my break points. I have a vid here (if you can handle my fumbling around) where I make sure everything is installed, set some break points, follow your instructions as per the github readme. If you have any advice, it would be appreciated.

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