I'm using PhpStorm and trying to debug my application using breakpoints while running my Jasmine tests. I can get the debugger to pause at the breakpoint in my file.test.js files but when the test steps into my application code it opens the correct file but the incorrect line of code.
For example: If I set a breakpoint in my test at the await xyz()
line the debugger will go to the file that has the function xyz()
but it will go line 15 which is no where near the actual function declaration. Furthermore the debugger doesn't pause if I set breakpoints in the application code itself. So if I was to set a breakpoint in the xyz()
function the debugger just skips over it.
I begin by running this test
script which is in my package.json file:
"test": "cross-env BUILD_ENV=test UTIL_LOG=LOG_ALL nyc jasmine JASMINE_CONFIG_PATH=jasmine.json"
I think it has to do with the source maps but I'm not experienced enough in node, webpack, babel, etc to know for sure. Any help would be much appreciated.
Here's my webpack.config.js:
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const slsw = require('serverless-webpack');
module.exports = {
entry: slsw.lib.entries,
target: 'node',
mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
externals: [nodeExternals()],
optimization: {
minimize: false
},
module: {
rules: [
{
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
retainLines: true
}
}
],
include: __dirname,
exclude: /node_modules/
}
]
},
output: {
libraryTarget: 'commonjs',
path: path.join(__dirname, '.webpack'),
filename: '[name].js'
},
devtool: 'source-map'
};
Here's my .babelrc:
{
"presets": [
[
"env",
{
"targets": {
"node": "18"
}
}
]
]
}
Here's my debug config in PhpStorm: