Debugging Typescript Webpack Project - Breakpoints are ignored - Help/Advise needed

Hello,

I have a project that mixes up several js files and ts classes compiled by tsc and bundled by webpack running on ws (local-web-server) in dev mode. map.js are generated by tsc.

I tryed several debug run configurations as described in the help but still all my breakpoints are ignored on runtime (although recognized and listed on the debugger panel).

As an example i followed this and tried to debug on localhost: https://www.jetbrains.com/help/webstorm/running-and-debugging-typescript.html#ws_ts_debug_client_side_on_external_dev_server

Any hint how to proceed would be great! Thanks.

 

package.json

{
"name": "nn",
"version": "1.0.0",
"description": "",
"main": "src/main.js",
"scripts": {
"dev": "concurrently --kill-others \"npm run compileTSAndWatch\" \"npm run bundleAndWatch\" \"npm run webserver\"",
"create dist": "webpack --config webpack.prod.config.js",
"compileTS": "tsc",
"compileTSAndWatch": "tsc -w",
"bundle": "webpack --config webpack.config.js",
"bundleAndWatch": "webpack --watch --config webpack.config.js",
"webserver": "ws",
"test:jest": "jest",
"coverage:jest": "jest --coverage",
"test:cypress:open": "cypress open",
"test:cypress:run:all": "cypress run --spec \"cypress/integration/cc2/**/*.spec.js\"",
"clean:cypress:screenshots": "node ./npm_scripts/cleanup_cypress_screenshots.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"@types/easeljs": "^1.0.0",
"@types/preloadjs": "^0.6.32",
"@types/tweenjs": "^1.0.3",
"createjs": "^1.0.1",
"gsap": "^3.7.1",
"rasterizehtml": "^1.3.0"
},
"devDependencies": {
"@types/fs-extra": "^9.0.11",
"@types/jest": "^26.0.23",
"concurrently": "^6.0.2",
"cypress": "^7.4.0",
"exports-loader": "^2.0.0",
"fs-extra": "^9.1.0",
"glob": "^7.1.7",
"html-webpack-plugin": "^5.3.1",
"imports-loader": "^2.0.0",
"jest": "^26.6.3",
"local-web-server": "^4.2.1",
"script-loader": "^0.7.2",
"ts-jest": "^26.5.5",
"typescript": "^4.2.4",
"webpack": "^5.35.1",
"webpack-cli": "^4.6.0"
}
}

tsconfig.json

{
"compilerOptions": {
"target": "ES2015",
"sourceMap": true,
"downlevelIteration": true,
"allowSyntheticDefaultImports": true,
"moduleResolution": "Node"
},
"exclude": [
"node_modules"
]
}

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

const PACKAGE = require('./package.json');
const version = PACKAGE.version;

module.exports = {
entry: './src/main.js',
output: {
filename: `perseus-en-${version}.js`,
path: path.resolve(__dirname)
},
plugins: [new HtmlWebpackPlugin({
title: `Perseus EN ${version}`,
template: '_template/_template.html'
})],
resolve: {
alias: {
createjs: 'createjs/builds/1.0.0/createjs.min.js'
}
},
module: {
rules: [
{
test: /node_modules[/\\]createjs/,
use: [{
loader: 'exports-loader',
options: {
type: 'commonjs',
exports: 'single window.createjs',
},
}],
},
{
test: /node_modules[/\\]createjs/,
use: [{
loader: 'imports-loader',
options: {
wrapper: 'window',
},
}],
},
]
},
mode: "development"
}

 

 

5 comments
Comment actions Permalink

As far as I can see, you don't have the devtool option set in your webpack.config.js.

According to https://webpack.js.org/configuration/devtool/, when it's omitted, the source mapping quality is "bundle", i.e. you will see all generated code of a chunk in a single blob of code. This is the raw output file without any devtooling support, no sourcemaps

0
Comment actions Permalink

yes, in an earlier attempt i had written

devtool: "source-map"

but it made no difference. Map files are generated by ts not by webpack. Could this be the reason?

0
Comment actions Permalink

If the files are transpiled by tsc first and then passed to webpack, you need to make sure that webpack loader used to process them loads the generated sourcemaps, and, if some additional processing (minifying/bundling/etc) is done, creates new sourcemaps

Could you check if you can debug your app in Chrome Dev Tools, BTW? Can you see your original source files in the Sources tab of DevTools?

0
Comment actions Permalink

good hint:

no, chrome complains like this about missing map files (although they exist) :

DevTools failed to load source map: Could not load content for webpack://myapp_en/src/App.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

 

 

 

0
Comment actions Permalink

Strange - normally DevTools have no issues loading sourcemaps using webpack:// protocol... anyway, all I can tell is that there are some issues with sourcemaps:(

0

Please sign in to leave a comment.