typescript - 使用 Visual Studio 2019 和 Webpack 在 TypeScript 文件中未命中断点

问题描述

我有一个 ASP.NET MVC 5 应用程序，我们希望将 typescript 用于客户端代码，并使用 webpack 将所有内容捆绑到一个 js 文件中。TypeScript 是使用 npm 安装的。当我在 Visual Studio 2019 中的 TypeScript 文件中设置断点时，它永远不会被命中。我可以使用浏览器开发工具查看 TypeScript 文件并设置断点。然后，当该断点被击中时，它会在 Visual Studio 中显示。如果我将 webpack 排除在外，让 Visual Studio 编译 TypeScript 文件，我可以设置一个断点，它会毫无问题地被命中。

这是我们的 packages.json 文件：

{
  "name": "TypeScriptWebpackPlayground",
  "version": "1.0.0",
  "description": "",
  "repository": "",
  "main": "index.js",
  "scripts": {
    "Install": "npm install",
    "WebpackDevelopment": "webpack --mode=development",
    "WebpackProduction": "webpack --mode=production",
    "Debug": "run-s Install WebpackDevelopment",
    "Release": "run-s Install WebpackProduction"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "npm-run-all": "^4.1.5",
    "ts-loader": "^8.0.14",
    "typescript": "^4.1.3",
    "webpack": "^5.17.0",
    "webpack-cli": "^4.4.0"
  }

这是tsconfig：

{
  "compilerOptions": {
    "target": "es5", 
    "module": "commonjs", 
    "sourceMap": true, 
    "strict": true, 
    "esModuleInterop": true, 
    "skipLibCheck": true, 
    "forceConsistentCasingInFileNames": true 
  }
}

这是 webpack 配置：（我已经尝试过 source-map 和 inline-source-map）

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    entry: "./ClientApp/app.ts",
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: "ts-loader",
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    output: {
        path: path.resolve(__dirname, "Scripts/custom"),
        filename: "bundle.js"
    },
    plugins: [
        new CleanWebpackPlugin()
    ]
};

这是我试图让断点被击中的一行 TypeScript 文件：

alert("Please break here!");

标签： typescriptwebpackasp.net-mvc-5visual-studio-2019

这几天我遇到了同样的问题，没有一个解决方案能解决我的问题。但是，我发现了一个可能对您有用的解决方法，首先确保您的 webpack.config.js 中有这些行

const webpack = require('webpack');

// ...

devtool: "inline-source-map",
    plugins: [
        new webpack.SourceMapDevToolPlugin({})
    ]

// ...

之后，您的捆绑包生成的 javascript 应该有一个 .map 以便能够调试代码。

从那里没有什么新东西，我发现它有效的诀窍是：

在 Visual Studio 的 TypeScript 文件行中设置断点
运行应用程序
打开 Inspector（F12 或 RMB -> Inspector）
转到 Sources 选项卡，应该有一个名为 webpack:// 的云，打开它并查找你的 TypeScript 文件，一旦你发现它在你在 Visual Studio 上所做的同一行中放置一个断点
重新加载您的页面或转到应调用的位置
Visual Studio 将在您标记的点停止
出于某种原因，它删除了您设置的断点，放置了另一个断点，现在它可以正常工作了

希望对您或其他人有所帮助。

typescript - 使用 Visual Studio 2019 和 Webpack 在 TypeScript 文件中未命中断点

问题描述

解决方案

推荐阅读