用VS Code调试Typescript Preact应用

Question

对于教育，我使用推荐的方式建立了一个预先应用程序:

preact create typescript preactTS

这很好，结果项目可以在VS Code中打开。为了运行它，我在包中更改了dev脚本。json:

"dev": "preact watch -H localhost -p 3001 --clear false",

并添加了一个启动配置:

{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch preactTS on Chrome",
"url": "http://localhost:3001",
"webRoot": "${workspaceFolder}",
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///*": "${workspaceFolder}/src/*",
"webpack:///./*": "${workspaceFolder}/src/*"
},
"showAsyncStacks": true,
}
]
}

和我的tsconfig.json:

{
"compilerOptions": {
"target": "es2022",
"module": "esnext",
"allowJs": true,
"jsx": "react",
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment",
"removeComments": true,
"sourceMap": true,
"esModuleInterop": true,
"baseUrl": "./",
"paths": {
"react": [
"./node_modules/preact/compat"
],
"react-dom": [
"./node_modules/preact/compat"
]
},
"strict": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"sourceRoot": "src",
"lib": [
"es2022",
"dom"
],
"skipLibCheck": true,
"experimentalDecorators": false,
"allowSyntheticDefaultImports": true,
"strictPropertyInitialization": false,
"emitDecoratorMetadata": false,
"noFallthroughCasesInSwitch": false,
},
"include": [
"src/**/*"
],
"exclude": []
}

之后，我能够在Chrome实例中启动web应用程序。现在我想调试应用程序，正如你在启动配置中看到的，我已经添加了地图路径覆盖。对于这些条目，我的断点是有效的，但是执行并没有在那里停止，我不知道为什么。

然而，添加debugger语句是有效的，一旦调试器停止，我就可以逐步执行代码。但即使这样，新的断点仍然不起作用。

在Visual Studio Code中调试Preact应用程序的建议设置是什么?

Answer 1

解决方案是在启动配置中设置一个选项，这个选项不经常使用(至少在搜索它时没有很多有用的结果):

{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch preactTS on Chrome",
"url": "http://localhost:3001",
"webRoot": "${workspaceFolder}",
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack://*": "${workspaceFolder}/src/*",
},
"runtimeArgs": [
"--allow-insecure-localhost"
],
"showAsyncStacks": true,
"smartStep": true,
"perScriptSourcemaps": "no"
}
]
}

每个脚本源映射必须禁用，显然。