Hata koduyla eşlemeli hata ayıklama hatası kaynak harita çalışmıyor

Question

Merhaba, angular-cli kullanarak bir uygulama geliştirdim ve kod ve chrome uzantısı için Debugger kullanarak hata ayıklamaya çalışıyorum. Bir süre sonra çalışmayı başardım, çok iyi. Ne olur benim tipcript sınıfımda bir break-point ayarlayabilirim ama kaynak harita yanlış gibi yanlış bir satır numarasına yerleştirilir.

ayıklama süreci - açık terminali ng vscode içinde

ben şu var F5 ayıklama sekmesine gidin ve tıklayın daha hizmet: Ben LaunchChrome yapılandırması kullanan

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" 
    ] 
    } 
} 

Answer 1

ben açısal-cli-beta19-3 ve daktilo 2.0.6 güncellendi ve o inşaat şimdi krom önbelleği açtılar.

GÜNCELLEME: açısal 2.4.1 kullanarak artık

nedir komik burada https://github.com/Microsoft/vscode-chrome-debug

tanımlanan

"sourceMapPathOverrides": { 
    "webpack:///*": "${webRoot}/*" 
} 

ile çalışmak yok ama o

"sourceMapPathOverrides": { 
    "webpack:///C:*": "c:/*" 
} 

ile çalışır olmasıdır

ve linu için x @carpinchosaurio söylediği gibi

"webpack:///*": "/*" 

GÜNCELLEME 2017/02/21: artık kaynak haritası yolu geçersiz kılma için gerek yoktur açısal ve daktilo yeni sürümleri ile

.

"@angular/compiler-cli": "2.4.8", 
"@angular/cli": "1.0.0-beta.32.3", 
"typescript": "2.1.6" 
angular version 2.4.8 

Çalışma kurulumu: herkes için

{ 
    "version": "0.2.0", 
    "configurations": [ 
    { 
     "name": "LaunchChrome", 
     "type": "chrome", 
     "request": "launch", 
     "url": "http://localhost:4200", 
     "sourceMaps": true, 
     "webRoot": "${workspaceRoot}", 
     "userDataDir": "${workspaceRoot}/.vscode/chrome" 
    } 
    ] 
} 

Answer 2

hala bu benim için çalıştı ilgi - Bunu gerçekleştirmek nasıl

{ 
     "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 
    }