DevTools控制台中的调用功能不会触发断点

Question

bounty到期在6天内。该问题的答案有资格获得+ 50声望赏金。CodyBugstein想要引起更多关注对此问题。

我的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

截屏：

Answer 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()

Answer 2

似乎您在屏幕快照的第12行上的断点处暂停，并且您试图从此处调用该函数。由于调试器已经在那里暂停，我的猜测（'guess'，因为我不熟悉调试器的内部原理]是如果不使用调试器控件，它将无法跳转到任何其他断点。

建议的解决方法：当调试器在第12行暂停时，将appDiv的引用分配给控制台中的新变量：

savedAppDiv = appDiv

然后继续，让脚本完全运行。之后，您可以使用存储的引用来调用myFunc，它应该在其中的断点处暂停：

savedAppDiv.myFunc()