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