Debugging WebAssembly with Modern Tools | Hacker News Reader

Debugging WebAssembly with Modern Tools

developers.google.com

171 pointsfeross25 comments

Awesome! This is the web summit talk I was looking forward to. So part of the promise of wasm is its integration with the web api and dom. In the fractal application for example if we extend that to include a zoom function that handles mouse events and updates variables, I'm probably employing something like blazor or js-sys in rust. How will that high level integration be handled in the dev console? And is it possible to create custom visualizations? Thanks in advance ;)

Did you mean ChromeDevSummit talk or there was a separate WebSummit talk on this too?

Although I have no use for it currently I am fascinated by Web-assembly (and PWAs). But is it actually useful? I understand why theoretically it is, but is it being useful in practise?

Answering my own question, a little, I use figma.com a lot. But the potential seems so great, and the available PWAs so poor....

Expecting this is a good place to ask

Basically it is the same thing as Java Applets, Flash, ActiveX, PNaCL, just this time everyone jumps of joy using it, because it is "safe" [0].

And then use it in scenarios like IBM i TIMI, z/OS language environments, P-Code, M-Code, Dis, CLR, JVM,..., and call it "innovation".

Whatever, I just ride the wave, need to keep that CV updated.

[0] - https://www.software-lab.org/publications/usenixSec2020-WebA...

This time WASM promises to be as widespread as JavaScript (no plugins needed) and can be targeted by many languages. Having all the major browser vendors on board helps a lot.

I, for one, am greatly looking forward to kicking JS and all its warts to the curb for my frontend code, so this article is great news. DOM access next, please!

> Answering my own question, a little, I use figma.com a lot. But the potential seems so great, and the available PWAs so poor....

It's just that WebAssembly, like any new technology, can and usually is used in very specific paths that require it.

As a result, it's true that there is not that many full WebAssembly-powered PWAs, although the ones that are, like Figma you already mentioned or Google Earth or various Blazor-powered apps already speak for themselves.

However, there is even more apps and websites out there that use Wasm either directly or via library dependencies for calculations, graphics or even things like hyphenation - in my research https://github.com/mnater/Hyphenopoly was one of the most popular Wasm-powered libs used across a bunch of CMS and blog platforms - probably the last place you would expect to find WebAssembly in, and yet...

I'm coming at with from a similar place as you; I think it's really cool but the benefits are somewhat fringe for normal web apps.

I'm currently writing a SPA in WASM just because I want to play with trendy tech, and the biggest benefit I have observed is massive code size improvement. A similar app I wrote using React had an uncompressed bundle size of about 2 Mb (ouch), which gzipped down to 400 kb. The wasm competitor is about 150 kb and 90 kb gzipped, which is a pretty good code size savings, although still a little bloated. I also strongly prefer the Rust development experience over Typescript, even though TS was perfectly serviceable and the WASM-browser interface is still a little unpolished (but still quite capable). Overall my experience tells me WASM has a strong future but we are house on the bleeding edge of usability at the moment.

If you like small assets and a strongly typed language you may like working with Elm [1]

[1] https://elm-lang.org/

It's mainly hamstrung right now by the hoops you have to jump through to get it talking to the actual web page, is my understanding. Some companies though, like Cloudflare, are playing with it as a cross-platform server/desktop runtime, which is interesting

It's absolutely useful in practice. Sometimes the library you need was written in C++, and needs to run performantly and offline. I needed WASM and PWA to make an offline Japanese dictionary: https://birchlabs.co.uk/mecab-web/index.html It uses WASM to do linguistic processing via the C++ library, mecab. It tells you where the spaces should go in a Japanese sentence, and what the dictionary form is of each word (so you can lookup the meaning).

Thers is this tool whole algorithms were originally implemented in C++ to use in industrial applications. But was easily ported to the web to create a PWA that now anybody can use. This would have not been possible before. Check it out: https://pidtuner.com

Provided Flash would be installed, or Chrome was used as browser, this has been possible since 2011.

Given the Chromification of the Web, that kind of makes it anybody.

webassembly would be a good thing to have extensions within your app via wasmer/wasi unfortunatly not many languages are going into webassembly

I never that the tools I used for tracing (chrome://tracing) and now debugging C/C++ code would be my web browser itself.

I just tried it and it works pretty well. Awfully slow on my mid-2014 MacBookPro though, especially the variable-view-panel redrawing takes very long (1..2 seconds). But definitely a promising new start compared to the older source-map debugging solution.

Hopefully this will also lead to a 'seamless debugging experience' inside VSCode. It would be pretty awesome to have (for instance) a HTML panel with a WebGL canvas in one VSCode tab while stepping through the C/C++ code in another tab. With a bit of tinkering this would also make a nice shadertoy-style live-coding environment.

Not WebAssembly related, but there are already VSCode plugins for "a nice shadertoy-style live-coding environment!"

GLSL preview: https://marketplace.visualstudio.com/items?itemName=circlede...

Full on Shadertoy environment (preview panel, lets you use Shadertoy's uniforms): https://marketplace.visualstudio.com/items?itemName=stevenso...

Interesting, are you on the latest Chrome Canary? If so, could you please report a bug with a simple repro to the https://bugs.chromium.org/p/chromium/issues/entry?template=D... link mentioned in the article?

Does this work with Rust's WASM target yet? The article only discusses C/C++ via Emscripten.

It does work with basic Rust compiled to Wasm, but most of the ecosystem uses wasm-pack / wasm-bindgen, which currently doesn't support DWARF.

You can subscribe to https://github.com/rustwasm/wasm-bindgen/issues/2389, but, unfortunately, wasm-pack currently is maintainerless until someone steps in. (see https://twitter.com/ag_dubs/status/1319651621698232322)

If a Google person is reading this, the blog has a dead link at "Please install it by going to this link: goo.gle/wasm-debugging-extension"

Thanks, going to fix soon-ish! Not sure how it slipped by.

I wonder if one could connect GDB to this by writing some sort of WASM backend for it?

You will be able to build your own extension with any backend in the future, but I'm curious what you're looking to gain from that?

I don't know whether GDB understands the Wasm-specific constructs in DWARF, while the current integration uses LLDB under the hood, which does support those.

It would be nice to have more than one debugger for a given target, mostly.

I guess you'd have to make series of patches to GDB to make it work, as well as to build your own DevTools extension once the API is stable, but in theory should be possible, yeah.

Reply on news.ycombinator.com