QIP component debugger

Load a QIP Content component and step through its WebAssembly instructions. Everything runs locally in your browser.

Choose a published component or a local .wasm file. For text components, type in the text box or paste while the debugger screen has focus. Use X I for input memory, X O for output memory, X R for the last read, and X W for the last write. Press M to switch between memory bytes and the page map. While examine mode is active, Up and Down Arrow page through memory.

Open the browser console and press a debugger key to see render timings. The page reports the complete synchronous update, a forced style and layout pass, and the wait for the next animation frame. To measure paint and compositing, record the keypress in the browser's Performance panel. The page adds timestamp markers to that recording. Developer Tools and console logging add some overhead, so compare several keypresses.

Turn on Memory thermal to run the memory heat map tool on the same component and input. It draws one pixel per byte of each 64 KiB page that render touched, 256 bytes per row, with tiles stacked top to bottom. Red is the instructions spent producing a byte, green is loop iterations, blue is calls, and alpha is how often it was accessed. Faint grey bytes were loaded from a data segment or the input but never used. The image covers the whole run, not the steps so far, and runs again each time the target or input changes. Hover a pixel to read its tile, offset, and levels. Absolute scale uses a fixed log scale so you can compare runs, and the readout then shows approximate counts.

Not every QIP component is supported yet. The interpreter accepts modules up to 1 MiB with no imports, one memory up to 128 MiB, and one fixed funcref table with up to 4,096 entries. It supports active function-index element segments and typed call_indirect, but not table mutation. An unsupported component shows the reason in the debugger screen.

Download: qipdb.wasm (128.68 kB).