问题描述
如何通过使用VSCode's built in JavaScript Debugger在VSCode中的webpack-dev-server上运行的原始打字稿源文件中调试webpack项目,而不在输出捆绑文件中进行调试?
解决方法
webpack.config.ts
import Webpack from "webpack";
import Path from "path";
const factory: Webpack.ConfigurationFactory = (env,args): Webpack.Configuration => {
const outputPath = Path.resolve(__dirname,"build");
const config: Webpack.Configuration = {
output: {
path: outputPath
},devtool: "source-map",// this is a key point,this option makes browser catch breakpoints faster than "inline-source-map"
devServer: {
// don't need writeToDisk="true"
contentBase: outputPath,hot: true,liveReload: false,}
};
return config;
};
export default factory;
tsconfig.json !超重要
{
"compilerOptions": {
"sourceMap": true // if not set,breakpoints will point wrong lines
}
}
launch.json
{
"version": "0.2.0","configurations": [
{
"type": "pwa-chrome",// note this is not just "chrome" as the debugger is "JavaScript Debugger"
"name": "Attach Chrome","port": 9222,// depending on your preference,you may want to set the request option as 'launch'.
// you may want to set the request option as 'launch'
"request": "attach",// if the request option is 'launch' then this option should be changed to "url": "localhost:3000"
// note that the port number should be the one you set on devServer.port in webpack.config
"urlFilter": "localhost:3000","webRoot": "${workspaceFolder}/frontend",// make the path match your project
},]
}
有关应如何设置launch.json的更多信息:Debugger for Chrome
尽管它不是JavaScript Debugger,但它们共享大多数配置,因为VSCode刚刚将JavaScript调试工具从Debugger for Chrome
移到了JavaScript Debugger
,因此您可以参考链接上的描述