1
我有一個Angular 4/Material項目並且正在使用Visual Studio代碼。該項目使用角度/ cli如何使用Visual Studio調試Angular 4單元測試代碼
我已經開始使用Karma和Jasmin編寫一些單元測試。該設置全部通過角度/ cli來完成。
現在我想調試我的測試。
運行「ng test」會出現一些錯誤。嘗試通過在代碼中設置斷點來調試這些錯誤，不會產生任何結果。
使用谷歌我發現了很多建議如何配置Karma和VSC，但他們都沒有幫助我。 我的猜測是這是一個與版本相關的問題。
所以根據我的設置，任何人都可以幫助我嗎？
"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"
}
編輯
如果我發表我的配置文件，也許有人可以看出一些問題。
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}/"
}
}
]
}
是瀏覽器控制檯不夠好嗎？我知道你已經特別要求VSCode調試幫助，但是隻想知道你是否嘗試過通過瀏覽器控制檯進行調試？ – TypeScripter
我試過,,,但我從來沒有發現如何在源代碼中設置斷點。 –
讓我告訴你chrome，其他瀏覽器也有類似的調試方法。當你的測試執行時，你會發現一個瀏覽器窗口打開（假設你沒有運行無頭）。在該瀏覽器窗口中，您有一個調試按鈕。點擊。然後在調試窗口中點擊f12，然後在sources選項卡上通過「Ctrl + o」打開您的spec文件（ts）。放置斷點並再次運行測試（f5）。你應該能夠達到斷點 – TypeScripter