Вызов функции из консоли DevTools не вызывает точку останова

Question

My Chrome DevTools делает паузу в точке останова, которую я установил.

Я go на консоли, и я вручную вызываю функцию (скажем, myFunc()), и она выполняется правильно.

Однако точка останова, установленная внутри myFunc(), никогда не бывает ударил! Я ожидаю, что когда я вызываю функцию, должна быть вызвана функция в коде, и должна быть достигнута точка останова!

Исходный код очень прост:

// 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

Вот ссылка на страницу: https://typescript-gmngl3.stackblitz.io/~/index.ts

Ссылка на исходный код в Stackblitz: https://stackblitz.com/edit/typescript-gmngl3

Снимок экрана:

Answer 1

Кажется, что вы остановились на точке останова в строке 12 на скриншоте, и вы пытаетесь вызвать функцию оттуда. Поскольку отладчик там уже приостановлен, мое предположение («предположение», поскольку я не знаком с внутренностями отладчика) состоит в том, что он не может перейти на любую другую точку останова без использования элементов управления отладчика.

Предлагаемый обходной путь: Когда отладчик делает паузу в строке 12, присвойте ссылку appDiv новой переменной в консоли:

savedAppDiv = appDiv

Затем продолжите и позвольте сценарию полностью работать. После этого вы можете использовать сохраненную ссылку для вызова myFunc, и она должна остановиться в точке останова внутри нее:

savedAppDiv.myFunc()

Answer 2

Вы можете вызвать debug (функцию) в своей консоли, и она должна добавить точку останова в первой строке вашей функции. Вот еще некоторые подробности: https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#function

В вашем случае запишите это в консоль:

debug(appDiv.myFunc);

// now you can call myFunc and it should hit a breakpoint

appDiv.myFunc()