调试前端项目
vue.config.js
module.exports = {
configureWebpack:{
devtool: 'source-map'
}
}
tsconfig.json
"compilerOptions":{
"outDir": "./dist"
}
为什么要配置tsconfig.json? 如果不配置，则.ts文件转化的.js文件以及.map文件就默认生成在src文件夹下
lanuch
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///*": "${webRoot}/*",
"webpack:///./*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/src/*"
}
}
需要注意的是sourceMaps 和sourceMapPathOverrides并不是必需的
attach
调试node.js项目
如果想调试npm run ...的构建过程，需要vscode单步调试构建的过程
如下官方参考
https://code.visualstudio.com/docs/nodejs/nodejs-debugging
给出的样例
在pacakge.json中
"scripts": {
"debug": "node --nolazy --inspect-brk=9229 myProgram.js"
}
在launch中
{
"name": "Launch via npm",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "debug"],
"port": 9229
}
需要注意的是，往往我们的项目中选用的是node_modules/.bin文件下的文件启动 比如 package.json中
"serve": "vue-cli-service serve --open",
vue-cli-service是node_modules/.bin下的一个本地依赖包。 按照官方参考改造如下 package.json中
"serve-debug": "node --nolazy --inspect-brk=9229 ./node_modules/.bin/vue-cli-service serve --open "
vue-cli-service === node ./node_modules/.bin/vue-cli-service
