How to debug webpack project in typescript files not output bundle file running on webpack-dev-server in VSCode

Question

How to debug webpack project in original typescript source files not output bundle file that are running on webpack-dev-server in VSCode by using VSCode's built in JavaScript Debugger?

Answer 1

You will be able to achieve it like this in the end.

webpack.config.ts

import Webpack from "webpack";
import Path from "path";

const factory: Webpack.ConfigurationFactory = (env, args): Webpack.Configuration => {
    const outputPath = Path.resolve(__dirname, "build");
    const config: Webpack.Configuration = {
        output: {
            path: outputPath
        },
        devtool: "source-map", // this is a key point, this option makes browser catch breakpoints faster than "inline-source-map"
        devServer: {
            // don't need writeToDisk="true"
            contentBase: outputPath,
            hot: true,
            liveReload: false,
        }
    };

    return config;
};

export default factory;

tsconfig.json !super important

{
    "compilerOptions": {
        "sourceMap": true // if not set, breakpoints will point wrong lines
    }
}

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome", // note this is not just "chrome" as the debugger is "JavaScript Debugger"
            "name": "Attach Chrome",
            "port": 9222,
            // depending on your preference, you may want to set the request option as 'launch'.
            // you may want to set the request option as 'launch'
            "request": "attach",
            // if the request option is 'launch' then this option should be changed to "url": "localhost:3000"
            // note that the port number should be the one you set on devServer.port in webpack.config
            "urlFilter": "localhost:3000",
            "webRoot": "${workspaceFolder}/frontend", // make the path match your project
        },
    ]
}

For more information about how you should set launch.json: Debugger for Chrome

Although it's not JavaScript Debugger, they share most of the configuration as VSCode has just moved javascript debugging tool from Debugger for Chrome to JavaScript Debugger, so you can just refer to the description on the link.