What is the best way to debug WASM builds | Zig Programming Language | Page 1

jovial sentinel Jul 5, 2024, 2:05 PM

#

Hey, everyone. I'm getting interesting in using zig compiled as WASM in the browser frontend.
I do have some issues though when it comes to debugging.
I was wondering if anyone has some experience with it and maybe some documentation or idea where I can find decent information on this topic.
I've been trying to google it myself but I don't really know "what" to google for.
Right now I'm using emscripten as compile target because I've been working with raylib for quite a while now and they use emscripten as target, too.

sweet sable Jul 5, 2024, 6:22 PM

#

you can do print debugging from zig with no emscripten necessary. i did thiis recently and found this repo helpful https://github.com/daneelsan/zig-wasm-logger

#

here's what i did. in zig you'll need to use std.log and override the std_options.logFn. then declare an extern to js consoleLog method which you'll pass in the wasm import object

#

pub const std_options: std.Options = .{
    .logFn = logFn,
};

var logbuf: [1024]u8 = undefined;
extern fn consoleLog(ptr: [*]const u8, len: usize) void;

fn logFn(
    comptime level: std.log.Level,
    comptime scope: @Type(.EnumLiteral),
    comptime fmt: []const u8,
    args: anytype,
) void {
    _ = scope;
    var fbs = std.io.fixedBufferStream(&logbuf);
    fbs.writer().print("[{s}]: ", .{@tagName(level)}) catch unreachable;
    fbs.writer().print(fmt, args) catch unreachable;
    consoleLog(&logbuf, fbs.pos);
}

#

then in js

#

const importObj = {
  env: {
    consoleLog: (ptr, len) => {
      const s = decoder.decode(
        new Uint8Array(instance.exports.memory.buffer, ptr, len),
      );
      console.log(s);
    },
  },
};

window.addEventListener("load", () => {
  WebAssembly.instantiateStreaming(fetch("lib.wasm"), importObj).then((res) => {
    instance = res.instance;
  });

polar cliff Jul 5, 2024, 6:31 PM

#

I suggest following this instead: https://developer.chrome.com/docs/devtools/wasm

#

While it does require you to use Chrome for debugging, it’s just way better than using console.log

#

With “following this” I mean enabling dwarf support in the browser settings and obtaining the chrome extension which is mentioned in the article.

#

Don’t need to specify any flags to Zig to output dwarf (unless you use release-small, in which case you need to disable stripping)

jovial sentinel Jul 6, 2024, 6:13 PM

#

Oh, nice! The chrome debugger looks very handy indeed.

#What is the best way to debug WASM builds