webpack-dev-server not working from debugger on Windows 10

[kryptonianson]

I have an issue with getting webpack-dev-server to run from the debugger in Visual Studio Code on Windows 10. The project runs perfectly on Linux and Mac, but for some reason it errors out on windows. It also works fine from VSC's tasks implementation, and from the command line on all platforms. Thank you in advance for your help.

Please note I have posted this issue in two other places in case this is not a bug in VSC:

http://stackoverflow.com/questions/42138058/webpack-dev-server-not-working-from-debugger-on-windows-10

webpack/webpack-dev-server#785

The error I get on windows is the following:

Cannot launch program 'c:\devel\src\MyWebKit\node_modules.bin\webpack-dev-server'; setting the 'outFiles' attribute might help.

My current setup is:

VSC: 1.9.1
OS: Windows 10 Anniversary
webpack: 2.2.1
webpack-dev-server: 2.3.0

My configuration launch.json file:

{
  "version": "0.2.0",
  "configurations": [
    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/node_modules/.bin/webpack-dev-server",
        "args": [
            "-d",
            "--config",
            "webpack/default.js"
        ],
        "outFiles": [
            "${workspaceRoot}/build/*"
        ],
        "stopOnEntry": false,
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": null,
        "runtimeArgs": [],
        "env": {
            "NODE_ENV": "development"
        },
        "console": "internalConsole",
        "sourceMaps": true
    }
  ]
}

[Tyriar]

Does your project have compiled JS files? If so you should try set outFiles to something like this:

"outFiles": [
  "${workspaceRoot}/out/**/*.js"
]

[kryptonianson]

Thank you so much for your reply. All my outFiles are sitting directly in the root of "build," and there are only 3 js files as a result. I just tried the following for good measure with the same result:

    "outFiles": [
        "${workspaceRoot}/build/**/*.js"
    ],

Perhaps it is important for me to mention that all the "src" files get served dynamically through the webpack-dev-server, so actual build files should be irrelevant. On Mac/Linux "build" files don't even have to exist for this to work. The only reason I added this to the launch configuration was for completeness. If I remove "outFiles" from my configuration and the "build" directory from my system on Mac/Linux everything still works beautifully without error. Hope that makes sense.

[Download]

I'm trying to figure out how to make Visual Studio Code launch Webpack Dev Server for debugging. Any docs on how to achieve that? Google leads me here but I fear if I use OPs code I will have his same issue (I'm on Windows)

[weinand]

@kryptonianson In your launch config above program points to ${workspaceRoot}/node_modules/.bin/webpack-dev-server.

This cannot work.

The program attribute expects a JavaScript file and "webpack-dev-server" is actually a unix shell script.
On Windows you'll have to use the corresponding "webpack-dev-server.cmd" and you have to use it with the "runtimeExecutable" attribute because that's the only attribute that supports arbitrary 'executables'.

Please see this documentation for details.

I assume that the "-d" somehow sets webpack into debug mode. If this is the case, you should let VS Code know the debug port. For this add a "port": 1234 to your launch config (but replace the 1234 since it is just an example).

In addition I suggest that you start with disabled sourceMaps until you've managed to get the launching working.

I suggest you use something like this:

{
  "version": "0.2.0",
  "configurations": [
    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "runtimeExetuable": "${workspaceRoot}/node_modules/.bin/webpack-dev-server",
        "windows": {
               "runtimeExetuable": "${workspaceRoot}/node_modules/.bin/webpack-dev-server.cmd",
        },
        "runtimeArgs": [
            "-d",
            "--config",
            "webpack/default.js"
        ],
        "port": 1234,
        "outFiles": [
            "${workspaceRoot}/build/*"
        ],
        "stopOnEntry": false,
        "cwd": "${workspaceRoot}",
        "env": {
            "NODE_ENV": "development"
        },
        "console": "internalConsole",
        "sourceMaps": false
    }
  ]
}

[Download]

Thanks @weinand

The program attribute expects a JavaScript file and "webpack-dev-server" is actually a unix shell script.
On Windows you'll have to use the corresponding "webpack-dev-server.cmd" and you have to use it with the "runtimeExecutable" attribute because that's the only attribute that supports arbitrary 'executables'.

Yeah I sorta figured that out. I went the other route and created a .js file that starts the dev server, It half works... The dev server is started and a browser opens on the right page, but setting break points does not work. Also, if I stop debugging, the dev server keeps running.

I will read the docs and try the other way.

I think a specific tutorial about setting up VS code with Webpack Dev Server and Babel would be very welcome. Because this setup is very popular among Node devs but I haven't found any good docs on how to set that up. Just bits and pieces here and there, most of which are intended for slightly different scenarios. If anyone knows of such a tutorial, please add a link here!

[weinand]

@Download

• the simplest approach for getting debugging to work is to launch your "stuff" from the command line and then attach VS Code to it. For this you only need to know the debug port that your "stuff" is listening on. Only if that works you can try to use a launch config that does both steps in one go.
• are you trying to debug a node.js program (the server) or are you trying to debug a JavaScript running in a browser? Your "node" launch config from above hints at the former. To debug the client (browser) you need to install the Chrome debug extension.
• is your approach from above actually able to establish a stable debug session (VS Code statusline turns orange and you see the step buttons).

[Download]

Only if that works you can try to use a launch config that does both steps in one go.

This is a good tip! Trying it atm.

are you trying to debug a node.js program (the server) or are you trying to debug a JavaScript running in a browser?

Eventually, both (universal / isomorphic / server-rendered node js app), but for now just via Webpack dev server

is your approach from above actually able to establish a stable debug session (VS Code statusline turns orange and you see the step buttons).

No not with my previous approach. But I just tried with the attaching with chrome debugger extension and saw the orange status bar for the first time. Thanks for your tips finally some progress!

[weinand]

You will only see the statusline turn orange (and remain orange) if the node debugger could attach to node.js successfully. So whatever you are starting in your launch config, make sure that there is some node process that is actually in debug mode.

If your wepack stuff uses an npm script for starting the webpack dev server in debug mode, you could use that script in the launch config too. You just have to find out the debug port and add that via the port attribute to your launch config.

(Two weeks ago I was experimenting with MERN (mongo+webpack+babel+react) and I created a launch config that worked fine for me. See #22378 (comment) )

[Download]

You just have to find out the debug port

I guess not. Webpack-dev-server starts a webserver... which you visit with the browser. So it seems like using the chrome debugger with webpack-dev-server is the best way to go. I have that somewhat working now. But the problem is with the source maps which don't seem to be picked up. But that's another issue and I won't bother you guys with it.

Thanks for your help guys!

[weinand]

Aha, but then you don't need a launch config of type "node" at all...