WebAssembly 调试时怎么查看内存变化？

Chrome DevTools 现在其实支持查看 WASM 线性内存了，只是藏得比较深。你可以在 Memory 面板拍一个 heap snapshot，然后在搜索框里搜 WebAssembly.Memory 或者直接找 buffer 属性，点开就能看到内存的 ArrayBuffer 内容。不过这方法确实不够直观，每次都要重新拍快照。

更实用的做法是在 Console 里写一个辅助函数，随时调用来看内存：

// 在 Console 里运行一次，之后就能重复使用

function wasmMem(view = 'u8', offset = 0, length = 64) {

  const mem = instance.exports.memory.buffer;

  const arr = new Uint8Array(mem, offset, length);

  console.log(Memory [${offset}-${offset+length}]:, Array.from(arr));

}

// 或者查看像素数据（RGBA 格式）

function wasmPixels(width, height) {

  const mem = new Uint8ClampedArray(instance.exports.memory.buffer, 0, width * height * 4);

  return mem;

}

这样你只需要在 Console 里输入 wasmMem() 就能看到内存块，或者 wasmPixels(512, 512) 直接拿到 ImageData 用。

还有个土办法——既然你是做图像处理的，完全可以直接把 WASM 内存指针传给 JS，在 Canvas 上画出来看：

const ptr = instance.exports.get_pixel_ptr(); // 假设你有这个导出

const data = new Uint8ClampedArray(instance.exports.memory.buffer, ptr, 512 * 512 * 4);

const imageData = new ImageData(data, 512, 512);

ctx.putImageData(imageData, 0, 0);

这样实时预览比盯十六进制数据直观多了，调试效率会高很多。

如果你用的是比较新的 Chrome 版本（110+），可以在 Sources 面板的断点里直接右键选择 "Add to watch"，然后输入 new Uint8Array(instance.exports.memory.buffer, ptr, 64) 就能像 C++ 那样 watch 内存地址的值了，虽然不如本地调试器那么爽，但基本够用。

直接用 Chrome DevTools 的 Memory Inspector 插件或者自己写个简单的内存查看器就行，别折腾手动打印了。

最省事的是装个叫 Wasm Memory Inspector 的扩展（GitHub 上有开源，搜一下就能找到），装完后在 DevTools 里会多一个叫 Wasm Memory 的面板，能直接看到 instance.exports.memory 的原始 buffer，支持按字节/短整/浮点数查看，还能设置 watch 地址。

如果不想装扩展，自己写个临时调试工具也很快，比如在 JS 里加个定时器：

setInterval(() => {

  const mem = new Uint8ClampedArray(instance.exports.memory.buffer);

  console.log('first 100 bytes:', Array.from(mem.slice(0, 100)));

}, 100);

或者更狠一点，直接把内存映射成 ImageData 画到 canvas 上看实时变化（适合图像处理场景）：

const canvas = document.createElement('canvas');

canvas.width = 512;

canvas.height = 512;

const ctx = canvas.getContext('2d');

const imgData = ctx.createImageData(512, 512);



function updateFrame() {

  const mem = new Uint8ClampedArray(instance.exports.memory.buffer);

  imgData.data.set(mem); // 假设内存布局是 RGBA 顺序

  ctx.putImageData(imgData, 0, 0);

  requestAnimationFrame(updateFrame);

}



updateFrame();

再配上你贴的 .canvas-container 样式，直接就能肉眼观察像素变化了，比干看内存 dump 高效多了。