在Visual Studio 2019和Webpack中，TypeScript文件中没有命中断点 &

我有一个ASP。我们希望使用typescript编写客户端代码，并使用webpack将所有内容打包成一个单独的js文件。TypeScript是使用npm安装的。当我在TypeScript文件中设置Visual Studio 2019中的断点时，它永远不会被击中。我可以使用浏览器的开发工具来查看TypeScript文件并设置断点。当断点被击中时，它会在Visual Studio中显示出来。如果我把webpack从混合中拿出来，让Visual Studio编译TypeScript文件，我可以设置一个断点，它将不会出现任何问题。

这是我们的包裹。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!");

我面对你同样的问题有几天了，没有一个解决方案能解决我的问题。然而，我发现了一个解决方案，也可能与你一起工作，首先确保你有这些行在你的webpack.config.js

const webpack = require('webpack');
// ...
devtool: "inline-source-map",
plugins: [
new webpack.SourceMapDevToolPlugin({})
]
// ...

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

没有什么新东西，我发现它有效的技巧是:

在你的TypeScript文件行中设置一个断点
运行应用程序
打开检查器(F12或RMB ->检查员)
转到Sources选项卡，应该有一个名为webpack://的云，打开它并查找你的TypeScript文件，一旦你找到它，在你在Visual Studio
重新加载你的页面或者去应该叫
Visual Studio将在你标记的
由于某些原因，它删除了您设置的断点，添加另一个断点，现在它工作正常

希望这对你或其他人有帮助。

这似乎是一个老问题，微软已经推动了很长时间:https://developercommunity.visualstudio.com/t/the-breakpoint-will-not-be-hit-breakpoint-set-but/675860

在Visual Studio 2019 16.10.4中，问题仍然发生。

在做了大量的研究和尝试了建议的几个步骤之后。我们团队的一位同事很好奇地查看了Visual Studio在以下目录/文件中生成的日志:

运行:%临时%

: 用户? ?当地 AppData Tempvisualstudio-js-debugger.txt

有一行引起了他的注意:

[20:12:00.532 UTC] From client:launch({"name"; "Attach to Chrome程序from Visual Studio" type"; Chrome ";request";launch";breakOnLoad"; true;breakOnLoadStrategy";;instrument"; " _clienttoverlaypausedmessage& quot;; &quotStudio""logFilePath":"C: silvairls AppData 用户本地 Temp visualstudio-js-debugger.txt"trace":"info","sourceMaps":真的,"showAsyncStacks"的确,"smartStep":假的,"url":"https://localhost: 5011/","runtimeExecutable":"C: 程序文件谷歌Chrome 程序 chrome.exe"userDataDir":"C: silvairls AppData 用户本地 _b9b7c470微软 VisualStudio 16.0 WebTools 10 b84e65_ba6a8fd4"webRoot":"C: 回购 silvairls 用户来源XXXXXXX 前端 xxx.XXXXXXX.XXX wwwroot"port": 52556})

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

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

我们创建了目录，.ts文件中的断点又开始工作了。我们删除了目录，再次调试给出了一个问题，即我们将问题系统化了。

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

相关内容

最新更新

热门标签：