嗨,我已经建立了一个使用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:///*": "/*"
}
}
]
}
angular-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"
]
}
}
我已经更新到angular-cli-beta19-3和打字稿2.0.6,并清除了chrome中的缓存,现在可以使用了。
更新:立即使用Angular 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"
}
]
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句