CODEWITHSUNDEEP
typescriptwebpackvisual-studio-codewebpack-dev-servervscode-debugger
Changdae Park
Changdae Park

Reputation: 1079

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

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?

Upvotes: 0

Views: 853

Answers (1)

Changdae Park
Changdae Park

Reputation: 1079

You will be able to achieve it like this in the end. enter image description here

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.

Upvotes: 1

Related Questions