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

Question

我有一个 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!");

Answer 1

这似乎是一个老问题，微软长期以来一直在推动这个问题： https://developercommunity.visualstudio.com/t/the-breakpoint-will-not-be-hit-breakpoint-set-but/675860

在 Visual Studio 2019 16.10.4 中，问题仍然出现。

经过大量研究并尝试执行建议的几个程序。我们团队的一位同事很好奇查看 Visual Studio 在以下目录/文件中生成的日志：

Run: %TEMP%

?:\Users\???\AppData\Local\Tempvisualstudio-js-debugger.txt

一行引起了他的注意：

[20:12:00.532 UTC] From client: launch({"name":"Attach to Chrome program from Visual Studio","type":"chrome","request":"launch","breakOnLoad":true,"breakOnLoadStrategy":"instrument","_clientOverlayPausedMessage":"Paused in Visual Studio","logFilePath":"C:\\Users\\silvairls\\AppData\\Local\\Temp\\visualstudio-js-debugger.txt","trace":"info","sourceMaps":true,"showAsyncStacks":true,"smartStep":false,"url":"https://localhost:5011/","runtimeExecutable":"C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe","userDataDir":"C:\\Users\\silvairls\\AppData\\Local\\Microsoft\\VisualStudio\\16.0_b9b7c470\\WebTools\\10B84E65_BA6A8FD4","webRoot":"C:\\Users\\silvairls\\source\\repos\\XXXXXXX\\FrontEnds\\xxx.XXXXXXX.XXX\\wwwroot","port":52556})

我们看到 Visual Studio 需要这个“wwwroot”目录存在于项目根目录中。与 .csproj 文件处于同一级别。

在我们的一个项目中，打字稿调试不起作用，受祝福的目录不存在。

我们创建了目录，.ts 文件中的断点再次开始工作。我们删除目录，再次调试又出现问题，就是我们把问题系统化了

当然，可能还有其他类型的场景会导致此问题。但对我们来说，这就是问题所在。

Answer 2

我已经面临同样的问题几天了，没有一个解决方案可以解决我的问题。但是，我找到了一种也可以与您一起使用的解决方法，首先确保您的 webpack.config.js 中有这些行

const webpack = require('webpack');

// ...

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

// ...

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

没什么新鲜的，我发现它有效的技巧是：

1. 在 Visual Studio 中的 TypeScript 文件行中设置断点
2. 运行应用程序
3. 打开检查器（F12或RMB ->检查器）
4. 转到“源”选项卡，应该有一个名为 webpack:// 的云，打开它并查找您的 TypeScript 文件，一旦发现它，就在与 Visual Studio 上相同的行中放置一个断点
5. 重新加载您的页面或转到应该调用的地方
6. Visual Studio 将停在您标记的点上
7. 由于某种原因，它删除了您设置的断点，放置另一个断点，现在可以正常工作了