Question

我正在尝试使用Chrome开发者工具调试canvas元素。
从这里：
How to inspect Canvas Frames
我可以看到有一个实验功能可以执行类似的操作，但已被删除。

是否有一种方法可以搜索/查找负责修改某些特定canvas元素的JS代码？这样至少我们可以向JS添加断点

Answer 1

事件监听器断点部分可让您在创建画布上下文时暂停。但是在修改画布时，我看不到任何暂停点。

如果在页面加载后修改了画布，则可以在控制台中运行以下操作：

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]);     
  }
}

然后触发修改。

如果发生在页面加载中，只需在修改画布之前运行的脚本中的某个位置添加断点，暂停后在控制台中运行以上代码，然后恢复脚本执行。

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

Answer 2

我找到了一种解决方法：从CanvasRenderingContext2D覆盖该函数并添加一个“调试器”。每次调用时要在那里停止的行（或添加一些额外条件来停止）

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

2 个答案: