basically it's 404'ing on the livereload.js asset which I'm not using in my static file serving backend.

livereload.js is injected by the live build server, it's not needed. Example

git clone https://github.com/webgpu/webgpu-debugger.git
cd webgpu-debugger
npm ci
npm run build
rm -rf node_modules  # just to prove there is no livereload.js
npx servez .         # serve with an unrelated server

Now go to http://localhost:8080/examples and run the examples. none of them are using livereload.js

be warned though, this is super ultra alpha code. We were given 3 weeks to experiment in Oct/Nov 2022 and this is as far as we got. It showed captures of the samples that are checked into the repo but there are tons of known issues and TBDs. It's unclear if and when we'll find more time to work on this.

You're right, livereload isn't needed. For some reason when I re-attempted this today, the livereload related error is gone.

I'm now encountering another issue (the 2nd one in the stack trace):

Assertion failed: Doesn't have "createComputePipeline"

Now go to http://localhost:8080/examples and run the examples.

Yes, the included examples work as expected. Now I'm trying to make it work in my own project. My assumption is I can:

1. run npm run build
2. copy the dist/webgpu-debugger.js into my project
3. import './webgpu-debugger.js in my first line of script
4. open my code in a new browser window and see the webgpu-debugger stuff at work

Am I missing something/integrating wrong?

be warned though, this is super ultra alpha code

Thanks for the context/background, good to know. 👍 I'm definitely not expecting a fully cooked solution; what I'm after is just being able to inspect any/all of the textures in my program at various mip levels, for at least 1 frame. Was hoping this might work for my basic use case.

IIRC (since it's been almost a year), the code currently requires you to call captureFrame

import { captureFrame } from '/dist/webgpu-debugger.js';

...


            captureFrame();

I don't remember in detail though. See the examples. I think they all call traceFrame but traceFrame is a local library that just calls captureFrame

the code currently requires you to call captureFrame`

In my code when I run this, I'm seeing an error related to createComputePipeline

I'm wondering if maybe webgpu-debugger is only handling render pipelines?

Assertion failed: Doesn't have "createComputePipeline"

s = r.createComputePipeline({
        layout: u,
        compute: {
            module: r.createShaderModule({
                code: q
            }),
            entryPoint: "cs_main"
        }

It's possible. If none of the examples uses a compute pipeline then we didn't notice it's missing. I'd search the code in the src folder for createComputePipeline and compare it to the results for createRenderPipeline

It seems to not be used in any of the examples, and there are some references that are present for createRenderPipeline but not present for createComputePipeline, notably src/capture/registry.ts and src/replay/lib.ts:

I'm also facing the same issue, both with captureFrame() and await new WebGPUDebugger().traceFrame(); returning Assertion failed: Doesn't have "createComputePipeline". Are compute pipelines just not viable for debugging ATM?

depends on what you mean by "viable". I don't see anything in the codebase that makes it impossible to implement, but as Greg already mentioned, the project is currently idle, and it was a very limited prototyping session in a tight time frame.

Gotcha, didn't realize it was still idle given the recent fix commit. Is there another resource you'd recommend for WebGPU or Dawn profiling/capture/debugging?

Not that I know of, I'm a little stuck. I have a somewhat complicated webgpu bloom setup with ~20 render passes and I don't have a way to inspect individual textures/passes yet. There are several other chrome extensions and projects similar to this one but none of them worked when I tried them 6+ weeks ago. If you find one that is viable, please do let me know. :)

for just capture there's https://github.com/brendan-duncan/webgpu_recorder which I've used to capture and create some minimal repos of issues.

Also, if you want to hack this debugger, adding support for "createComputePipeline" should not be too hard. Just search for "createRenderPipeline" and copy-pasta as appropriate. Sorry I can't offer more help.

I'll give that a try, thanks! At this point my needs are fairly simple; I just need to look at texture views of a given render pass and use that to visually debug problems. Hopefully this will suffice.

Sorry I can't offer more help.

No worries, I didn't expect you to drop what you're doing to work on this. :-) I appreciate the project update. I'm at the point where I'm finishing up core game logic/content, so debugging the pretty eye candy effects are not immediate priority, but they will be in the coming months. At that point I'd be open to hacking on the debugger and see if I can make compute pipelines work.

Gotcha. I think my use case is probably a bit more work to handle, since ideally I'd like to profile my shader to figure out what parts of the pass are the most compute-intensive. Maybe there's something out there! Thanks for your work on this so far.