您好我使用angular-cli构建了一个应用程序,我正在尝试使用vs代码调试它,并使用调试器进行chrome扩展。过了一会儿,我才能让它发挥作用。会发生什么事情,我可以在我的打字稿类中设置一个断点,但它被放置在一个错误的行号上,如源映射不正确。
调试过程 - 打开终端服务而不是转到调试选项卡,然后单击vscode中的F5
我有以下内容: 我使用LaunchChrome配置
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "LaunchChrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true,
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMapPathOverrides": {
"webpack:///C:*": "c:/*"
}
},
{
"name": "AttachChrome",
"type": "chrome",
"request": "attach",
"port": 9222,
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"diagnosticLogging": true,
"sourceMapPathOverrides": {
"webpack:///*": "/*"
}
}
]
}
角cli.json
{
"project": {
"version": "1.0.0-beta.18",
"name": "frontend"
},
"apps": [
{
"root": "src",
"outDir": "./dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css",
"../semantic/dist/packaged/semantic.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../semantic/dist/packaged/semantic.js",
"../node_modules/chart.js/dist/Chart.bundle.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
tsconfig.json
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
}
}
答案 0 :(得分:8)
我已更新到angular-cli-beta19-3和typescript 2.0.6并清除了chrome中的缓存,现在它可以正常工作。
更新:现在使用角度2.4.1
有趣的是,它无法使用
"sourceMapPathOverrides": {
"webpack:///*": "${webRoot}/*"
}
此处定义https://github.com/Microsoft/vscode-chrome-debug
但它适用于
"sourceMapPathOverrides": {
"webpack:///C:*": "c:/*"
}
和Linux一样,@ carpinchosaurio说
"webpack:///*": "/*"
更新2/21/2017:
使用新版本的angular和typescript,不再需要源映射路径覆盖。
"@angular/compiler-cli": "2.4.8",
"@angular/cli": "1.0.0-beta.32.3",
"typescript": "2.1.6"
angular version 2.4.8
工作设置:
{
"version": "0.2.0",
"configurations": [
{
"name": "LaunchChrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"userDataDir": "${workspaceRoot}/.vscode/chrome"
}
]
}
答案 1 :(得分:1)
对于任何仍然感兴趣的人都为我工作 -
{
"name": "Launch localhost with sourcemaps",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src",
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"sourceMapPathOverrides": {
"webpack:///./~/*": "${workspaceRoot}/node_modules/*",
"webpack:///./src/*": "${workspaceRoot}/src/*"
}
// Uncomment this to get diagnostic logs in the console
// "diagnosticLogging": true
}
答案 2 :(得分:0)
仅强调更多更新的answer:当前不需要在您的sourceMapPathOverrides
中拥有launch.json
属性。如果您要从旧的Angular更新项目,只需删除该属性即可开始调试。