debuggen - Kan geen breakpunt gebruiken voor TypeScript & Webpack in Visual Studio Code FireFox-debugger

Ik probeer de live-debugger te gebruiken om mijn Typescript te debuggen.

Ik heb het merendeel van de vragen en antwoorden online gecontroleerd. Kon geen concrete oplossing voor mijn situatie vinden.

Hier is mijn webpack-configuratiebestand:

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: ['./Scripts/test.ts'],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './Scripts/dist')
    },
    module: {
        rules: [
            {
                loader: 'ts-loader',
                test: /\.ts$/,
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".js"]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            include: /\.js$/,
            minimize: true
        })],
    devtool: 'source-map'
}

Hier is mijn Typescript-configuratie:

{
  "compilerOptions": {
    "outDir": "./Scripts/build/",
    "rootDir": "Scripts",
    "noImplicitAny": true,
    "noEmitOnError": true,
    "removeComments": true,
    "alwaysStrict": true,
    "sourceMap": true,
    "module": "es6",
    "target": "es5",
    "moduleResolution": "node",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
    "types": [
      "jquery",
      "jqueryui",
      "bootstrap-validator"
    ]
  },
  "include": [
    "Scripts/*.ts"
  ],
  "exclude": [
    "node_modules",
    "wwwroot"
  ],
  "compileOnSave": false
}

en hier is mijn nodeJS-pakketconfiguratie:

{
  "name": "xxxxxxxxx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "watch": {
    "build": {
      "extensions": "ts",
      "patterns": [
        "Scripts"
      ]
    }
  },
  "scripts": {
    "watch": "npm-watch",
    "build": "webpack"
  },
  "-vs-binding": {
    "BeforeBuild": [
      "build"
    ]
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/bootstrap-validator": "^0.11.2",
    "@types/jquery": "^3.3.0",
    "@types/jqueryui": "^1.12.1",
    "npm-watch": "^0.3.0",
    "ts-loader": "^3.3.1",
    "typescript": "^2.6.2",
    "uglifyjs-webpack-plugin": "^1.1.8",
    "webpack": "^3.10.0"
  }
}

Ik gebruik asp.net MVC 5 als de backendserver. En hier is de mappenstructuur:

Ik probeer mijn Typescript te debuggen en enkele breakpoints toe te voegen. Nadat de backend draaide, heb ik de FireFox-debugger gestart: https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug. Echter, die breakpoints worden nooit bereikt.

Het zou geweldig zijn als iemand de oplossing hiervoor heeft. Of Visual Studio Code of Visual Studio 2017 zou goed zijn als ik daar mijn TypeScript kan debuggen.

Antwoord #1

Ik kon dit aan de praat krijgen via "attach" met de "url"-eigenschap die naar localhost wees, en de "sourceMaps" die naar "server" wees voor de bronmapvertaling.

{
       "version": "0.2.0",
       "configurations": [
           {
               "name": "Launch Firefox Debugger",
               "type": "firefox",
               "request": "attach",
               "url": "http://localhost:64177/",
               "webRoot": "${workspaceFolder}",
               "sourceMaps": "server"
           }
       ]
   }

Terzijde, ik start de applicatie via de IIS Express-extensie, en de URL in de startconfiguratie is dezelfde als de IIS Express-URL.