I wish there were a good way to profile WebGPU code. I've seen this (very useful) article[1] on setting up PIX, but I'm ambitious. I want to see everything from draw call timings to flamegraphs of shader code.

Right now I feel like the only way to write efficient WebGPU code is to deeply understand specific GPU architectures. I hope some day there's a dev tools tab that shows me I'm spending too much time sampling a texture or there's a lot of contention on my atomic add.

[1]: https://toji.dev/webgpu-profiling/pix.html

Timestamp queries will give you essentially time spans you can use for profiling, but anything more than that and you really want to use a dedicated tool from your vendor like NSight, RGP, IGA, XCode, or PIX.

> Right now I feel like the only way to write efficient WebGPU code is to deeply understand specific GPU architectures. I hope some day there's a dev tools tab that shows me I'm spending too much time sampling a texture or there's a lot of contention on my atomic add.

It's kind of the nature of the beast. Something that's cheap on one GPU might be more expensive on another, or might be fine because you can hide the latency even if it's slow, or the CPU overhead negates any GPU wins, etc. The APIs that give you the data for what you're asking are also vendor-specific.

I've used [0] to profile WebGPU code w/ Nvidia Nsight, but yes better tools built into Chrome would be very nice.

[0] https://frguthmann.github.io/posts/profiling_webgpu/

Can forget about it.

Developer tooling for debugging 3D Web APIs has been a continuous request since WebGL 1.0, from 2011.

Until now the only thing that ever came out of it was SpectorJS and it shows its age.

For a while Firefox did have a debugger, that they eventually removed from developer tools.

You are left with writing the application twice, so that can make use of modern native debugging tools for graphics programming.