0

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?

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.