角色cli调试与vs代码源地图不工作 [英] Angular cli debuging with vs code source map not working
问题描述
调试过程 - 打开终端ng转到调试选项卡,然后单击vscode中的F5
我有以下内容:
我使用LaunchChrome配置
launch.json
{
version:0.2 .0,
配置:[
{
name:LaunchChrome,
type:chrome,
request 启动,
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
] b $ bindex:index.html,
main:main.ts,
test:test.ts,
tsconfig tsconfig.json,
前缀:app,
mobile:false,
styles:[
styles.css,
../sema ntic / dist / packaging / 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:{
量角器:{
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,
directi ve:true,
module:false,
pipe:true,
service:true
}
}
}
tsconfig.json
{
compilerOptions:{
声明: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和typescript 2.0.6,并在chrome中清除缓存现在可以工作。
更新:使用角度2.4.1现在
有趣的是,它不适用于
sourceMapPathOverrides:{
webpack:/// *:$ {we bRoot} / *
}
这里定义 https://github.com/Microsoft/vscode-chrome-debug
但它适用于
sourceMapPathOverrides:{
webpack:/// C:* :c:/ *
}
和linux作为@carpinchosaurio说
webpack:/// *:/ *
更新2/21/2017:
使用新版本的角色和typescript不需要源地图路径覆盖了。
@ angular / compiler-cli:2.4.8
@ angular / cli:1.0.0-beta.32.3,
typescript:2.1.6
角度版本2.4.8
工作设置:
version:0.2.0,
配置:[
{
name:LaunchChrome,
type:chr
请求:启动,
url:http:// localhost:4200,
sourceMaps:true,
webRoot :$ {workspaceRoot},
userDataDir:$ {workspaceRoot} /。vscode / chrome
}
]
}
Hi i have built an app using angular-cli and I am trying to debug it using vs code and Debugger for chrome extension. After a while I was able to make it work, well kind of. What happens is that i can set a break-point in my typescript class but it gets placed on a wrong line number like source map is incorrect.
Debug process - open terminal ng serve than go to debug tab and click F5 in vscode
I have the following: I use LaunchChrome configuration
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"
]
}
}
I have updated to angular-cli-beta19-3 and typescript 2.0.6 and cleared cache in chrome now it works.
UPDATE: using angular 2.4.1 now
Whats funny is that it doesnt work with
"sourceMapPathOverrides": {
"webpack:///*": "${webRoot}/*"
}
defined here https://github.com/Microsoft/vscode-chrome-debug
but it works with
"sourceMapPathOverrides": {
"webpack:///C:*": "c:/*"
}
and for linux as @carpinchosaurio said
"webpack:///*": "/*"
UPDATE 2/21/2017:
With new versions of angular and typescript there is no need for source map path overrides anymore.
"@angular/compiler-cli": "2.4.8",
"@angular/cli": "1.0.0-beta.32.3",
"typescript": "2.1.6"
angular version 2.4.8
Working setup:
{
"version": "0.2.0",
"configurations": [
{
"name": "LaunchChrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"sourceMaps": true,
"webRoot": "${workspaceRoot}",
"userDataDir": "${workspaceRoot}/.vscode/chrome"
}
]
}
这篇关于角色cli调试与vs代码源地图不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!