I have a CLI node app that I am trying to debug with VSCode. It works pretty well, however when hitting a breakpoint, VSCode opens a new code view from the source map file instead of the actual TS file located in my "src" folder. This is kind of annoying. When I run some JS code in a browser using VSCode as a debugger, VSCode opens the actual TS file as expected. How do I get this behavior also with node?
launch.json
:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Node",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/bin/js/index.js",
"console": "integratedTerminal",
"cwd": "${workspaceFolder}/bin/js",
"args": [
"authorize"
]
}
]
}
tsconfig.json
:
{
"compilerOptions": {
"baseUrl": "./src",
"moduleResolution": "node",
"module": "ES2020",
"target": "ES2018",
"allowSyntheticDefaultImports": true,
"jsx": "react",
"strict": true,
"strictPropertyInitialization": true,
"noEmitOnError": true,
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"outDir": "./bin",
"sourceMap": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
webpack.config.json
:
const path = require("path");
const webpack = require("webpack");
const { merge } = require('webpack-merge');
const commonConfig = {
target: 'node',
entry: "./src/Startup.ts",
module: {
rules: [
{
test: /\.tsx?$/,
use: [{
loader: "ts-loader"
}]
}
]
},
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"],
modules: ["./src", "node_modules"]
},
output: {
path: path.resolve(__dirname, "./bin/js/"),
filename: "index.js",
},
plugins: [
new webpack.DefinePlugin({ "global.GENTLY": false })
],
externals: {
'cliui': 'commonjs2 cliui',
'y18n': 'commonjs2 y18n',
'yargs-parser': 'commonjs2 yargs-parser',
}
}
const developmentConfig = {
mode: 'development',
devtool: 'source-map',
stats: {
warnings: false
}
}
const productionConfig = {
mode: 'production'
}
module.exports = (env, argv) => {
switch(argv.mode) {
case 'development':
return merge(commonConfig, developmentConfig);
case 'production':
return merge(commonConfig, productionConfig);
default:
throw new Error(`Configuration '${argv.mode}' does not exists.`);
}
}
The TS file paths generated by Webpack in the source map files are using the webpack protocol that VSCode did not understand. I solved it by adding this parameter in my webpack.config.js
so the source map contains absolute paths to the TypeScript files instead:
const commonConfig = {
output: {
devtoolModuleFilenameTemplate: "[absolute-resource-path]",
},
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.