代码之家 › 专栏 › 技术社区 › CodyBugstein

从DevTools控制台调用函数不会触发断点

google-chrome-console breakpoints google-chrome-devtools typescript javascript

0

CodyBugstein · 技术社区 · 6 年前

我的Chrome DevTools在我设置的断点处暂停。

我去控制台手动调用一个函数(比如, myFunc() )并且它正确执行。

但是,我在里面设置的断点 myFuncs() 永远不会被击中!我希望当我调用函数时,代码中的函数应该被调用,断点应该被命中!

源代码非常简单:

// 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 回复 | 直到 6 年前

1

2

hexbioc 6 年前

您似乎在屏幕截图第12行的断点处暂停,并试图从那里调用函数。由于调试器已经暂停在那里,我猜 ('gues',因为我不熟悉调试器的内部) 如果不使用调试器控件,它就无法跳到任何其他断点。

建议的解决方法: 当调试器在第12行暂停时,分配以下引用 appDiv 在控制台中添加一个新变量:

savedAppDiv = appDiv

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

savedAppDiv.myFunc()

2

hiddenuser.2524 6 年前

您可以在控制台中调用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()