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

Question

I have an ASP.NET MVC 5 application that we want to use typescript for client-side code and webpack to bundle everything up into a single js file. TypeScript is installed using npm. When I set a breakpoint in Visual Studio 2019 in a TypeScript file it is never hit. I am able to use the browsers developer tools to see the TypeScript file and set a breakpoint. Then when that breakpoint is hit it does show in Visual Studio. If I take webpack out of the mix and just let Visual Studio compile the TypeScript file I can set a breakpoint and it will be hit with no problem.

Here is our packages.json file:

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

Here is the tsconfig:

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

Here is the webpack config: (I have tried both source-map and 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()
    ]
};

Here is the one line TypeScript file that I am trying to get the breakpoint to be hit:

alert("Please break here!");

Answer 1

I was facing your same problem for a couple of days, none of the solution had solved my problem. However, I found a workaround that could possible work with you as well, first of all make sure you have these lines in your webpack.config.js

const webpack = require('webpack');

// ...

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

// ...

After that your bundle generated javascript should have a .map to be able to debug the code.

Nothing new from there, the trick I found that it works is:

1. Set a break point in your TypeScript file line in Visual Studio
2. Run the application
3. Open the Inspector (F12 or RMB -> Inspector)
4. Go to Sources tab, should has a cloud named webpack://, open that and look up for your TypeScript files, once you found it place a breakpoint in the same line you did on Visual Studio
5. Re-load your page or go where it should be called
6. Visual Studio will stop on the point you marked
7. For some reason it removes the breakpoint you've set, put another breakpoint and now it works fine

Answer 2

This appears to be an old problem, one that Microsoft has been pushing for a long time: https://developercommunity.visualstudio.com/t/the-breakpoint-will-not-be-hit-breakpoint-set-but/675860

Here in Visual Studio 2019 16.10.4 the problem was still occurring.

After a lot of research and trying to do several of the procedures suggested. A colleague of our team was curious to look at the logs that Visual Studio generates in the following directory/file:

Run: %TEMP%

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

One line caught his attention:

[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})

We saw that Visual Studio needs this "wwwroot" directory to exist in the project root. At the same level as the .csproj file.

In a project of ours, where typescript debugging wasn't working, the blessed directory didn't exist.

We created the directory and the breakpoints in .ts files started working again. We delete the directory and debugging again gives a problem, that is, we systematize the problem.

Of course, there may be other types of scenarios that cause this problem. But here for us, that was the problem.