1620269 - UX issues in debugging Wasm content

Status: NEW

(DevTools :: Debugger, enhancement, P3)

Description

[Jukka Jylänki]

STR:

1. Visit http://clb.confined.space/dump/unity/Wasm-Tiny3D-debug/Tiny3D.html
2. Open Debugger Devtool and enable "Pause on exceptions".
3. Reload page with Debugger tab open to get to the exception.

Observed: The following view is presented:

http://clb.confined.space/dump/unity/firefox_wasm_debugging.png

UX observations:

1. Opening the wasm debug view takes a long time, about 15 seconds.
2. The function callstack is not shown on the right, even though the wasm module was compiled with function symbol names. E.g. the function where the crash occurs is malloc().
3. I would have liked to use Ctrl-Home/Ctrl-End to get to the beginning/end of the function to find out what the name of that function was; but it looks like Firefox prints the whole wasm module in the debug box, so Ctrl-Home/Ctrl-End take one to the beginning/end of the whole module. That does not seem to be a particularly useful feature? In general, having all the functions dumped one after another seems counterproductive, as when one scrolls down/up to the end of one function, some other random function will show up that is unrelated to what one is debugging. Wouldn't it be better to just show the current function in the code view, and perhaps have a different view that would show information about the wasm module overall? (and e.g. allow navigating to arbitrary functions that way?)
4. Mouse hovering does not seem to do anything? (not sure if there would be some usefulness there?)
5. The code crashed to Wasm exception "RuntimeError: index out of bounds". It does not seem to be possible to find out what the culript index value was?