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

【问题标题】：Calling function from DevTools console does not trigger breakpoint从 DevTools 控制台调用函数不会触发断点
【发布时间】：2020-05-31 22:54:12
【问题描述】：

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

截图：

【问题讨论】：

仅供参考：如果您的 braikpoint 无法正常工作，请输入 debug
就像 Justinas 说的那样使用调试器：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 就在断点所在的地方，你应该可以访问该函数
谢谢！但是问题仍然存在，为什么它没有达到断点？进去输入debugger然后重新编译很痛苦

标签： javascript typescript google-chrome-devtools breakpoints google-chrome-console

【解决方案1】：

您似乎在屏幕截图的第 12 行的断点处暂停，并且您正试图从那里调用该函数。由于调试器已经暂停在那里，我的猜测 ('guess'，因为我不熟悉调试器的内部结构) 是它不能在不使用调试器控件的情况下跳转到任何其他断点。

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

savedAppDiv = appDiv

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

savedAppDiv.myFunc()

【讨论】：

【解决方案2】：

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

【讨论】：