Calling function from DevTools console does not trigger breakpoint

My Chrome DevTools pauses at a breakpoint I set.

I go to the console, and I manually call a function (say, myFunc()) and it executes properly.

However, the breakpoint I set inside myFunc() is never hit! I expect that when I call the function, the function in the code should be called and the breakpoint should be hit!

The source code is extremely simple:

// Import stylesheets
import './style.css';

// Write TypeScript code!
const appDiv: HTMLElement = document.getElementById('app');
appDiv.innerHTML = `<h1>TypeScript Starter</h1>`;

appDiv.__proto__.myFunc = function(){
  var myCoolFunction = "My cool function"; //. <---- breakpoint on this line is never hit
  console.log('myCoolFunction:', myCoolFunction);
}
console.log('appDiv', appDiv); // <---- manually call appDiv.myFunc() while paused on this line

Here is the link to the page: https://typescript-gmngl3.stackblitz.io/~/index.ts

Link to source code in Stackblitz: https://stackblitz.com/edit/typescript-gmngl3

Screenshot:

It seems like you are paused at a breakpoint on line 12 in the screenshot, and you're trying to call the function from there. Since the debugger is already paused there, my guess ('guess', since I am not familiar with the internals of the debugger) is that it cannot jump to any other breakpoint without using the debugger controls.

A suggested workaround: When the debugger pauses on line 12, assign the reference of appDiv to a new variable in the console:

savedAppDiv = appDiv

Then continue and let the script run entirely. After that, you can use the stored reference to call myFunc and it should pause at the breakpoint within it:

savedAppDiv.myFunc()