WebGPU Inspector
Introduction
Version: 0.9.0
Inspection, profiling, and graphics debugging browser extension for WebGPU.
WebGPU Inspector is designed to inspect what's happening with WebGPU on the page, independent of the engine.
WebGPU Inspector includes the following tools:
- Inspect records all GPU objects live on the page, letting you inspect their details.
- Capture records the GPU commands used to render a frame, letting you inspect details about each command.
- Record records all GPU commands and data used to render a set of frames, generating a self-contained HTML file that can play back the render, or be used for bug reports.
WebGPU Inspector provides the following capabilities:
- A live view of all GPU objects and inspect their details.
- Capture all GPU commands used to render a frame, along with render pass output images, textures, buffer data, render state.
- Edit shaders live on the page.
- Inspect storage and uniform buffers used for draw and dispatch calls.
- Inspect textures, including pixel values.
- Plot frame times and object allocations over time.
- Record all commands and data for a set of frames for playback or bug reports.
Developer Tools window
Select More Tools / Developer Tools, or press F12 or Shit+CTRL+J (Option + ⌘ + J on MacOS). You can also right-click on the page and select Inspect. When the WebGPU Inspector extension is enabled in the extension manager, there will be a WebGPU Inspector tab.
Extension Problem Solving
Back to top
WebGPU Inspector panel missing from Developer Tools
If the WebGPU Inspector tab is not present on the Developer Tools panel, try closing the Developer Tools window and opening it again. Sometimes the browser doesn't load the extension.
Inspect Start, Capture, or Record does not work
Sometimes the browser extension script does not get injected into the page properly. Refresh the page and WebGPU Inspector should start working.
Inspect is running but Capture does not work
Some pages will not update if they do not have focus. If Capture is not recording anything, try selecting the page to make sure it has focus.
Installation
Back to top
Chrome Web Store
Install WebGPU Inspector from the Chrome Web Store.
From Source
Back to top
To get the most up to date version of WebGPU Inspector, you can install the extension from source.
- Download project from Github.
Crome and Firefox don't support the same version of extension plug-ins, so you'll need to load the correct version.
Chrome
- Open chrome://extensions
- Enable Developer Mode (switch in top-right corner)
- Press Load Unpacked button
- Browse to
/extensions/chrome and press Select Folder
Edge
- Open edge://extensions
- Enable Developer Mode (switch on left side of page)
- Press Load Unpacked button
- Browse to
/extensions/chrome and press Select Folder
Firefox Nightly
- Firefox Nightly has work-in-progress WebGPU support, which you can enable from Settings / Nightly Experiments / Web API: WebGPU
- Open about:debugging
- Select This Nightly from the left side of the page, depending on which version of Firefox you're using.
- Only Firefox Nightly has WebGPU support, currently.
- Press Load Temporary Add-On.
- Browse to
/extensions/firefox , select manifest.json and press Open. - Temporary Add-On's will need to be re-loaded every time you start Firefox.
Safari Technology Preview
- Note:
- Safari support is still a work-in-progress and has issues
- Safari Technology Preview has WebGPU support, which you can enable from Develop / Feature Flags... / WebGPU.
- Safari Extension development is done through Xcode
- Open
/extensions/safari/WebGPU_Inspector.xcodeproj with Xcode- Switch the Scheme to WebGPU Inspector (macOS)
- Select Product / Run
- From Safari Technology Preview
- Select Develop / Developer Settings...
- Enable Allow unsigned extensions
- Select the Extensions tab in Settings, and make sure WebGPU Inspector is listed as an extension
- WebGPU Inspector should be a tab in the Web Inspector window (Develop / Show Web Inspector or right-click on page and select Inspect element)
- If you make changes to the WebGPU Inspector source
- From Xcode, select Product / Build (cmd-b)
Development
Back to top
Building the project requires an installation of Node.js.
- Make sure the dependencies are installed:
npm install - Compile the project:
npm run build. - Compile on file changes:
npm run watch.
After the project is built:
- If you have the DevTools open, right-click on the WebGPU Inspector DevTools panel, select
Reload frame. - Some changes require a full reload. Open chrome://extensions, press the refresh button for the WebGPU Inspector extension. With DevTools open for the page, right-click on the refresh button for the page and select "Empty Cache and Hard Reload". Then right-click on the WebGPU Inspector DevTools panel and select "Reload frame". This will make sure Chrome's cache has been fully cleared.
Notes
- Sometimes the terser minimizer can make source map debugging problematic. To simplify debugging, edit rollup.config.js and comment out the terser entry in plugins.
External Dependencies
Back to top
- WGSL Reflect
- Used for parsing and getting reflection information from WGSL shaders.
- WebGPU Recorder
- Used for generating recordings of WebGPU content.