我的Chrome DevTools在我设置的断点处暂停。
我转到控制台,然后手动调用一个函数(例如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
屏幕截图:
答案 0 :(得分:2)
似乎您在屏幕快照的第12行的一个断点处暂停了,您正试图从那里调用该函数。由于调试器已经在那里暂停,因此我的猜测('guess',因为我对调试器的内部并不熟悉)是如果不使用调试器控件,它将无法跳转到任何其他断点。 / p>
建议的解决方法:
当调试器在第12行暂停时,将appDiv
的引用分配给控制台中的新变量:
savedAppDiv = appDiv
然后继续,让脚本完全运行。之后,您可以使用存储的引用来调用myFunc
,它应该在其中的断点处暂停:
savedAppDiv.myFunc()
答案 1 :(得分:1)
您可以在控制台中调用debug(function),它应该在函数的第一行添加一个断点。以下是更多详细信息: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()