console.snapshot是Canvas渲染调试核心工具，通过代理上下文方法捕获单帧完整调用链，并结合screenshot、image等辅助验证渲染结果与资源状态。
Canvas 渲染调试的关键，是把“看不见的绘制过程”变成“可观察、可追溯、可对比”的操作序列。核心不在于重绘本身，而在于厘清每一帧里 谁调用了什么方法、传了什么参数、在什么状态下执行。控制台不是只用来输出文字的地方，它是你和 Canvas 上下文之间的实时对话窗口。
用 console.snapshot 捕获单帧调用链
这个轻量工具能直接反映 Canvas 2D 上下文在一次 requestAnimationFrame 周期内的真实行为：
- 调用
console.snapshot(ctx)会记录当前上下文所有已执行的绘图方法（如fillRect、beginPath、stroke），并按调用顺序展示堆栈 - 它不依赖代码打点，而是通过代理
CanvasRenderingContext2D原型方法实现拦截，因此能捕获第三方库或压缩代码中的隐式调用 - 特别适合排查“为什么这里没画出来”——比如
fillStyle被意外覆盖、save()/restore()不配对导致状态错乱
结合 screenshot 查看实际渲染结果
光看调用记录还不够，得对照像素输出验证是否符合预期：
-
console.screenshot(canvas, 0.5)生成缩略图，快速确认裁剪区域、缩放比例、透明度混合是否正常 - 如果发现某帧图像模糊或错位，但调用日志看起来没问题，大概率是
devicePixelRatio未适配或 canvas.width/height 与 CSS 尺寸不一致 - 连续多次截图可辅助判断动画卡顿是否源于某次异常大的绘制面积（例如误将
clearRect(0,0,9999,9999)写死）
用 image 辅助比对资源加载状态
Canvas 绘制常依赖图片、字体等外部资源，异步加载失败容易静默丢帧：
-
console.image(img.src)可直接在控制台预览图片是否加载成功、尺寸是否符合预期 - 配合
img.onload和img.onerror，在加载完成时立即调用，避免因资源未就绪导致的空白绘制 - 若使用
drawImage但画面无反应，先用console.image确认图片对象有效，再检查是否在onload外调用了绘制
搭配 Motion Canvas 的 profile 定位耗时环节
当需要深入性能瓶颈而非单纯验证逻辑时，结构化时间标记更高效：
- 在关键路径起始处调用
this.logger.profile('render-frame') - 在绘制循环末尾再次调用同名 profile，自动计算耗时并归类到“渲染帧”标签下
- 可嵌套使用，例如在
render-frame内标记update-particles和draw-grid，快速识别哪部分拖慢整体帧率
