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

Question

我有一个 ASP.NET MVC 5 应用程序，我们希望使用打字稿作为客户端代码，并使用 webpack 将所有内容捆绑到一个 js 文件中。 TypeScript 是使用 npm 安装的。当我在 TypeScript 文件中的 Visual Studio 2019 中设置断点时，它永远不会被命中。我能够使用浏览器开发人员工具查看 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

几天来我都遇到了同样的问题，none 的解决方案解决了我的问题。但是，我找到了一个也可能适用于您的解决方法，首先请确保您的 webpack.config.js

中包含这些行

const webpack = require('webpack');

// ...

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

// ...

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

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

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

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

Answer 2

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

这里是Visual Studio2019 16.10.4，问题还在。

经过大量研究并尝试执行建议的几个程序。我们团队的一位同事好奇地查看了 Visual Studio 生成的日志，如下 directory/file:

运行: %TEMP%

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

一行引起了他的注意：

[20:12:00.532 UTC] 来自客户端：launch({"name":"Attach to Chrome program from Visual Studio","type":"chrome ","request":"launch","breakOnLoad":true,"breakOnLoadStrategy":"instrument","_clientOverlayPausedMessage":"暂停 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.0_b9b7c470\WebToolsB84E65_BA6A8FD4","webRoot":"C:\Users\silvairls\source\repos\XXXXXXX\FrontEnds\xxx。 XXXXXXX.XXX\wwwroot","端口":52556})

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

在我们的项目中，typescript 调试不起作用，blessed 目录不存在。

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

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

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

Breakpoint not hit in TypeScript file using Visual Studio 2019 and Webpack

typescript

webpack

asp.net-mvc-5

visual-studio-2019