Breakpoint not hit in vscode with webpack and typescript

Viewed 701

When starting vscode debugging with chrome extension, a breakpoint I set in vscode are not hit. When I then set a breakpoint via developer tools of chrome, and reload my page, the breakpoint is hit (in vscode, so I can debug in vscode thereafter). I use webpack to produce one .js-file from my typescript sources. All sources are written in typescript. Can anybody help me to find out what is wrong?

In the trace log, I see the following info:

SourceMaps.getMapForGeneratedPath: Using inlined sourcemap in webpack-internal:///./src/amxcanvas.ts
SourceMap: creating for webpack-internal:///./src/amxcanvas.ts
SourceMap: sourceRoot:
SourceMap: sources: ["webpack://AmxCvs/./src/amxcanvas.ts?f516"]
SourceMap: no sourceRoot specified, using webRoot + script path dirname:
SourceMaps.scriptParsed: webpack-internal:///./src/amxcanvas.ts was just loaded and has mapped sources: ["/webpack:/AmxCvs/src/amxcanvas.ts"]
OnScriptParsed.resolvePendingBPs: The following pending breakpoints won't be resolved: undefined pendingBreakpointsByUrl = [["/Users/hoef/Documents/projekte/canvas.ts/src/amxcanvas.ts",{"args":{"source":{"name":"amxcanvas.ts","path":"/Users/hoef/Documents/projekte/canvas.ts/src/amxcanvas.ts"},"lines":[12],"breakpoints":[{"line":12}],"sourceModified":false},"ids":[1000],"requestSeq":4,"setWithPath":""}]] source = /webpack:/AmxCvs/src/amxcanvas.ts
OnScriptParsed.resolvePendingBPs: The following pending breakpoints won't be resolved: undefined pendingBreakpointsByUrl = [["/Users/hoef/Documents/projekte/canvas.ts/src/amxcanvas.ts",{"args":{"source":{"name":"amxcanvas.ts","path":"/Users/hoef/Documents/projekte/canvas.ts/src/amxcanvas.ts"},"lines":[12],"breakpoints":[{"line":12}],"sourceModified":false},"ids":[1000],"requestSeq":4,"setWithPath":""}]] source = webpack-internal:///./src/amxcanvas.ts

My launch.json is:

    {
        "type": "chrome",
        "request": "launch",
        "sourceMaps": true,
        "name": "Launch Chrome without Webserver",
        "file": "${workspaceFolder}/dist/index.html",
        "trace": "verbose"
    }

webpack.config.js is:

const path = require("path");

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: path.join(__dirname, '/src', '/amxcanvas.ts'),
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test:/\.css$/,
        use:['style-loader','css-loader']
      },
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'amxcanvas.bundle.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'var',
    library: 'AmxCvs'
  }
};
0 Answers
Related