Typescript breakpoints in Karma test don’t get hit with chrome debugger in vscode

I have seen and read plenty of similar questions and their respective answers, tutorials, and the documentation. However, none helped me solve my problem.

I have an Aurelia application with Typescript and Webpack. I run my tests with Karma which works just fine (including --watch). Now I’d like to debug my tests in VSCode. The Chrome Debug Extension is installed and in principle it works: I can insert debugger; statements so that the debugger breaks at that point.

Breakpoints, however, don’t get hit. I tried both with and without source maps. My launch config looks like this:

    {
        "type": "chrome",
        "request": "attach",
        "name": "attach to karma's chrome",
        "port": 9333,
        "webRoot": "${workspaceRoot}",
        "sourceMaps": true,
        "pathMapping": {
            "/": "${workspaceRoot}/",
            "/base/": "${workspaceRoot}/"
        },
        "sourceMapPathOverrides": {
            //"webpack:///./*": "${webRoot}/*",
            //"webpack:///src/*": "${webRoot}/*",
            //"webpack:///*": "*",
            //"webpack:///./~/*": "${webRoot}/node_modules/*"
            "webpack:///myproject/./*": "${webRoot}/*",
            "webpack:///myproject/src/*": "${webRoot}/*",
            "webpack:///myproject/*": "*",
            "webpack:///myproject/./~/*": "${webRoot}/node_modules/*"
        },
        "trace": "verbose"
    }

The webRoot looks good to me, it’s the base folder of what I can find in the source map. The sourceMapPathOverrides might look strange. The reason is that in the source map I find paths like webpack://myproject/./test/unit/type-transformer/base.spec.ts. I also tried the configuration that is commented and also without any overrides at all.

The logs say something like:

From client: setBreakpoints({"source":{"name":"base.spec.ts","path":"/path/to/myproject/test/unit/type-transformer/base.spec.ts"},"lines":[13],"breakpoints":[{"line":13}],"sourceModified":false})
To client: {"seq":0,"type":"event","event":"output","body":{"category":"telemetry","output":"setBreakpointsRequest","data":{"Versions.DebugAdapterCore":"6.6.0","Versions.DebugAdapter":"4.8.0","fileExt":".ts"}}}
To client: {"seq":0,"type":"response","request_seq":3,"command":"setBreakpoints","success":true,"body":{"breakpoints":[{"verified":false,"line":13,"message":"The breakpoint will be ignored, because the generated code cannot be found (path mapping problem?).","id":1000}]}}

(The message is in German for me so it might not exactly match the original English message.) What I find strange is that the path on the filesystem gets sent to chrome (as path). No idea how it should resolve that to the correct entry in the source map.

How can I configure the debugger so that breakpoints work?

Aurelia: Calling functions from the Chrome debug console

I am experienced, but new to Aurelia and cannot figure out how to call a specific function from the console.

Using this source:


import {} from 'css/style.css';
import {inject} from 'aurelia-framework';
import {DOM} from 'aurelia-pal';    
export class App {
  constructor() {
    this.message = 'Test Application';
    this.todos = ['a','b','c','d'];
    this.DOM = DOM;
  }
    getFish() {
        this.DOM.getElementById("#theMessage").style.color="green";
    }
}

I want to call getFish from the console. One may think that App.getFish() would do it, but no so much.

How DOES one call class functions in the debug console for Aurelia?

Inconsistent VS debugger behaviour – Aurelia project

I’m using Chrome, Aurelia, and Visual Studio 2017 for my project but the debugger will not consistently hit breakpoints.

versions are – chrome 63.0.3239.84 and VS 2017 Community Preview (2) – version 15.5.0 Preview 5

Follow the steps below to repo.

Setup

  • dotnet new aurelia
  • npm install
  • open project in Visual Studio

Scenario 1

  1. Open boot.ts and put a breakpoint on the first line of the configure(..) method
  2. Run project -> Chrome opens and chrome shows vs debugging is on.
  3. App renders in chrome. -> breakpoint is not hit
  4. Stop run
  5. Add a second breakpoint to the first line of the configureRouter(..) method of the app.ts file
  6. Run project -> breakpoint is hit

Scenario 2

  1. Perform scenario 1 sequence to step 6
  2. As soon as chrome opens, press F12 to open developer tools
  3. App renders -> no breakpoints are hit. breakpoints in VS have warning symbol “The breakpoint will not currently be hit…”

Scenario 3

  1. Perform scenario 1 sequence to step 6
  2. F5 past two breakpoints. App renders
  3. Refresh browser -> breakpoints are hit
  4. F12 to open chrome dev tools in browser
  5. Refresh browser -> breakpoints not hit
  6. F12 to close chrome dev tools in browser
  7. Refresh browser -> breakpoints not hit

Scenario 4

  1. Remove all breakpoints
  2. Run project -> app renders in chrome
  3. add breakpoint to boot.ts
  4. Refresh browser -> breakpoint is hit

Opening the chrome debugger tools seems to disconnect the visual studio debugger. But this SO post make me think it might be a project setting of some sort. I have no idea why the breakpoint in boot.ts fails to hit without a second in app.ts when the project it started. It is making debugging somewhat tedious.

  1. Can anyone repo ?
  2. Any idea as to a fix ?