如何在 VSCode 中的 webpack-dev-server 上调试 typescript 文件中的 webpack 项目而不输出捆绑文件 运行

Question

如何使用 VSCode's built in JavaScript Debugger 在 VSCode 的 webpack-dev-server 上调试原始 typescript 源文件中的 webpack 项目而不是输出捆绑文件运行？

Answer 1

你最终会达到这样的目的。

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 !超级重要

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

有关如何设置 launch.json 的更多信息：Debugger for Chrome

虽然它不是 JavaScript Debugger，但它们共享大部分配置，因为 VSCode 刚刚将 javascript 调试工具从 Debugger for Chrome 移动到 JavaScript Debugger，所以你可以参考link.

上的描述