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 ?