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'
}
};