Chrome 106+版本下如何用DevTools调试HTML Canvas？

关于旧版Canvas Inspection工具的说明 #

Chrome确实移除了独立的"Canvas inspection"面板，相关功能已经整合到DevTools的多个核心面板中，并非完全取消了Canvas调用的追踪能力。

当前Chrome原生调试方式 #

• Performance面板追踪绘制流程
  打开DevTools（F12/ Ctrl+Shift+I），切换到Performance面板，勾选Screenshots和Canvas选项后点击录制按钮。执行Canvas相关操作后停止录制，在时间轴中可以看到每帧的Canvas绘制快照，点击对应帧能查看完整的调用栈，定位具体的绘制代码。

• Elements面板查看Canvas基础信息
  在Elements面板找到目标<canvas>元素，右侧面板中启用Canvas标签（若未显示，可点击右上角>>按钮勾选），这里能查看画布尺寸、上下文类型，还能一键导出画布内容为PNG图片。

• Layers面板分析合成层级
  切换到Layers面板，Canvas元素会作为独立图层展示，可查看它的合成模式、位置等信息，帮助理解复杂应用（如Figma）中Canvas与其他元素的层级关系。

JavaScript手动Hook方案（适合逆向分析） #

如果需要精准捕获所有Canvas API调用，可通过重写Canvas上下文方法来实现，示例代码如下：

// 以fillRect为例，可扩展到drawImage、beginPath等所有2D上下文方法
const originalMethods = {
  fillRect: CanvasRenderingContext2D.prototype.fillRect,
  drawImage: CanvasRenderingContext2D.prototype.drawImage,
  beginPath: CanvasRenderingContext2D.prototype.beginPath
};

// 批量重写方法
Object.keys(originalMethods).forEach(methodName => {
  CanvasRenderingContext2D.prototype[methodName] = function(...args) {
    // 打印调用参数
    console.log(`[Canvas API] ${methodName} called with:`, args);
    // 打印调用栈，方便定位代码
    console.trace();
    // 执行原始方法
    originalMethods[methodName].apply(this, args);
  };
});

你可以通过DevTools的Snippets功能，在页面加载时注入这段代码，或者用Tampermonkey脚本自动注入，就能实时捕获Figma等应用的所有Canvas绘制调用，分析参数来逆向推导绘制逻辑。

针对Figma的额外调试技巧 #

• 在Debugger面板中，给document.createElement('canvas')或canvas.getContext('2d')设置断点，追踪Canvas实例的创建流程。
• 在Console面板中，选中Elements面板的Canvas元素后，执行$0.toDataURL()快速导出当前画布内容，对比操作前后的画布变化。

内容的提问来源于stack exchange，提问作者Vladislav