VS Code中的打字稿，测试和调试

Question

I am new to angular2 and typescript and have made a simple application which was generated with the angular CLI. Before I go on, I have to say that there is a gap in my understanding of what happens between seeing typescript code in VS Code and a running app in the browser.

In previous editors, I was used to seeing .js files generated and made sense of my running application as a web page with those generated files. But when one runs ng serve there are no .js files anywhere and the app still runs in the browser. The first thing I want to know is how that happens- I thought typescript was not readable by browsers.

Secondly, I am having trouble debugging unit tests in the Karma test runner using VS Code. I am able to debug the application itself, I am able to attach the debugger to the Karma instance, but when I put a breakpoint in my test I get the error breakpoint ignored because generated code not found (source map problem?) . For reference this is my launch.json :

    {
        "type": "chrome",
        "request": "attach",
        "name": "Attach Karma Chrome",
        "address": "127.0.0.1",
        "port": 9333,
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}"
    }

and my karma.conf.js contains

browsers: ['ChromeDebugging'],
customLaunchers : {
  ChromeDebugging: {
    base: 'Chrome',
    flags: ['--remote-debugging-port=9333']
  }
},

EDIT: This is the full karma.conf.js

Answer 1

try this

{
        "type": "chrome",
        "request": "attach",
        "name": "Attach Karma Chrome",
        "address": "127.0.0.1",
        "port": 9333,
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}/test"
    }

Answer 2

我决定使用有角种子存储库在浏览器中调试测试