调试 JS 修改一些特定的 canvas 元素

Question

我正在尝试使用 Chrome 开发人员工具调试 canvas 元素。
来自：
How to inspect Canvas Frames
我可以看到有一个实验性功能可以做类似的事情，但被删除了。

有没有办法 search/find 负责修改某些特定 canvas 元素的 JS 代码？这样至少我们可以在 JS

中添加断点

Answer 1

Event Listener Breakpoints 部分允许您在创建 canvas 上下文时暂停。但是当 canvas 被修改时，我没有看到任何暂停的断点。

如果 canvas 在页面加载后被修改，您可以运行在控制台中像这样：

const context = $("canvas").getContext("2d");
for (const key in context) {
  if (context[key] instanceof Function) {
    // debug() pauses on the first line of the function whenever it's called.
    // This function is only available from the DevTools Console:
    // https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#debugfunction
    debug(context[key]);     
  }
}

然后触发修改

如果它发生在页面加载时，只需在 canvas 修改前运行秒的脚本中的某处添加一个断点，运行上面的代码暂停时在控制台中，然后恢复脚本执行。

您可以尝试此演示中的工作流程：https://51789703.glitch.me/

Answer 2

我找到了一个解决方法：覆盖 CanvasRenderingContext2D 中的函数并添加一个 "debugger;" 行以在每次调用时停止（或添加一些额外的条件来停止）

调试 JS 修改一些特定的 canvas 元素

Debug JS modifying some specific canvas element

javascript-debugger

google-chrome-devtools

html5-canvas