1
Ich habe ein Angular 4/Material-Projekt und verwende Visual Studio Code. Das Projekt wird unter Verwendung von angular/cliDebuggen eines Angular 4-Unit-Tests mit Visual Studio-Code
eingerichtet Ich habe angefangen, einige Unittests mit Karma und Jasmin zu schreiben. Die Einrichtung erfolgt über angular/cli.
Jetzt möchte ich meine Tests debuggen.
Der laufende "ng test" gibt ein paar Fehler. Der Versuch, diese Fehler zu debuggen, indem ein Haltepunkt im Code gesetzt wird, führt zu keinem Ergebnis.
Mit google habe ich viele Vorschläge gefunden, wie Karma und VSC zu konfigurieren, aber keiner von ihnen hat mir geholfen. Meine Vermutung ist, dass dies ein versionsabhängiges Problem ist.
Also basierend auf meinem Setup kann mir jemand helfen?
"dependencies": {
"@angular/animations": "^4.3.6",
"@angular/cdk": "^2.0.0-beta.10",
"@angular/common": "^4.3.6",
"@angular/compiler": "^4.3.6",
"@angular/core": "^4.3.6",
"@angular/flex-layout": "^2.0.0-rc.1",
"@angular/forms": "^4.3.6",
"@angular/http": "^4.3.6",
"@angular/material": "^2.0.0-beta.10",
"@angular/platform-browser": "^4.3.6",
"@angular/platform-browser-dynamic": "^4.3.6",
"@angular/router": "^4.3.6",
"core-js": "^2.5.1",
"npm": "^5.4.0",
"rxjs": "^5.4.3",
"uuid": "^3.1.0",
"zone.js": "^0.8.17"
},
"devDependencies": {
"@angular/cli": "1.2.1",
"@angular/compiler-cli": "^4.3.6",
"@angular/language-service": "^4.3.6",
"@types/jasmine": "2.5.53",
"@types/node": "^8.0.26",
"codelyzer": "~3.1.2",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "^1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.5.3",
"npm-check-updates": "^2.12.1",
"protractor": "~5.1.2",
"ts-mockito": "^2.1.1",
"ts-node": "~3.2.2",
"tslint": "~5.5.0",
"typescript": "~2.4.0"
}
EDIT
Wenn ich meine Konfigurationsdateien veröffentlichen vielleicht kann jemand einige Probleme sehen.
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceRoot": "../src",
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2016",
"dom"
]
}
}tsconfig.spec.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"module": "commonjs",
"target": "es5",
"baseUrl": "",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}karma.config.js
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
browsers: ['ChromeDebugging'],
customLaunchers: {
ChromeDebugging: {
base: 'Chrome',
flags: [ '--remote-debugging-port=9333' ]
}
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
singleRun: false
});
};launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"address": "localhost",
"port": 9333,
"pathMapping": {
"/": "${workspaceRoot}",
"/base/": "${workspaceRoot}/"
}
},
{
"name": "Run jasmine",
"type": "chrome",
"request": "launch",
"url": "http://localhost:9876/debug.html",
"sourceMaps": true,
"webRoot": "${workspaceRoot}/src",
"skipFiles": [
"node_modules/**/*"
],
"sourceMapPathOverrides": {
"webpack:///./*": "${workspaceRoot}/*"
}
},
{
"type": "chrome",
"request": "attach",
"name": "Attach Karma Chrome",
"address": "localhost",
"port": 9333,
"sourceMaps": true,
"trace": "verbose",
"pathMapping": {
"/": "${workspaceRoot}/",
"/base/": "${workspaceRoot}/"
}
}
]
}
ist die Browser-Konsole nicht gut genug? Ich weiß, dass Sie speziell nach der VSCode-Debugging-Hilfe gefragt haben, aber Sie wollten nur wissen, ob Sie das Debuggen über Browser-Konsolen versucht haben? – TypeScripter
Ich habe versucht ,,, aber ich habe nie herausgefunden, wie Sie einen Haltepunkt im Quellcode festlegen. –
Lassen Sie mich Ihnen für Chrome sagen, andere Browser haben ähnliche Möglichkeiten zum Debuggen. Wenn Ihr Test ausgeführt wird, werden Sie ein geöffnetes Browserfenster bemerken (vorausgesetzt, Sie laufen nicht kopflos). In diesem Browserfenster haben Sie eine Debug-Schaltfläche. Hit that .. Dann auf dem Debug-Fenster Hit F12 und dann auf Sources Registerkarte öffnen Sie Spec-Datei (ts) über "Strg + O". Setzen Sie den Haltepunkt und führen Sie die Tests erneut aus (f5). Sie sollten in der Lage sein, Breakpoints zu treffen – TypeScripter