Inspect . Capture . Record . Shader Debugger
- Introduction
- Developer Tools Window
- Installation
- Claude Code Integration
- Development
- External Dependencies
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 three tools:
- Inspect — a live view of every GPU object on the page. Inspect their details, plot frame times (with CPU submit and GPU time), detect dropped frames and whether the frame is CPU- or GPU-bound, plot object allocations over time, inspect textures, and edit shaders live on the page.
- Capture — records the GPU commands used to render a frame, with render pass output images, textures, buffer data, and render state, letting you inspect details about each command, including the storage and uniform buffers used for draw and dispatch calls. Includes the ability to interactively debug shaders.
- Record — records all GPU commands and data used to render a set of frames, generating a self-contained HTML or binary file that can play back the render or be used for bug reports.
Select More Tools / Developer Tools, or press F12 or Shift+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.
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.
Sometimes the browser extension script does not get injected into the page properly. Refresh the page and WebGPU Inspector should start working.
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.
Install WebGPU Inspector from the Chrome Web Store.
Install WebGPU Inspector from the Firefox Add-Ons Store.
If the WebGPU Inspector's automatic injection isn't working to inspect the page (workers inside of iframes cause trouble), you can include webgpu_inspector.js directly in a page.
Add the script tag to your page before any code that uses WebGPU, so the inspector can patch the WebGPU API before it's used:
<script src="https://cdn.jsdelivr.net/gh/brendan-duncan/webgpu_inspector@main/extensions/chrome/webgpu_inspector.js"></script>To pin to a specific release instead of tracking main, replace @main with a version tag (e.g. @1.2.0).
When loaded this way, the script wraps the page's WebGPU API and exposes the inspector instance as webgpuInspector on the global (window.webgpuInspector in a page, self.webgpuInspector in a worker).
Once the inspector is loaded, you have two ways to view what it records:
- Open the WebGPU Inspector DevTools panel from the browser extension. The DevTools panel must be open when the page is loaded (refreshing the page may be necessary) in order to receive all of the WebGPU data from the beginning of the page's execution.
- Drive capture from the page itself with the Local Capture API — no DevTools panel required.
See the Manual Injection guide for the page-side Local Capture API, loading the script from JavaScript / TypeScript, Web Worker setup, and TypeScript type declarations.
To get the most up to date version of WebGPU Inspector, you can install the extension from source.
- Download project from Github.
Chrome and Firefox don't support the same version of extension plug-ins, so you'll need to load the correct version.
- Open chrome://extensions
- Enable Developer Mode (switch in top-right corner)
- Press Load Unpacked button
- Browse to <webgpu_inspector directory>/extensions/chrome and press Select Folder
- Open edge://extensions
- Enable Developer Mode (switch on left side of page)
- Press Load Unpacked button
- Browse to <webgpu_inspector directory>/extensions/chrome and press Select Folder
- 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 <webgpu_inspector directory>/extensions/firefox, select manifest.json and press Open.
- Temporary Add-Ons will need to be re-loaded every time you start Firefox.
- 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 <webgpu_inspector directory>/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)
WebGPU Inspector can be integrated with Claude Code as a plugin that brings WebGPU frame capture and analysis into a conversation with Claude.
Claude can launch (or attach to) a browser, instrument any page — with no browser extension and no changes to the page being analyzed — capture one or more frames, and then analyze the result: command and draw-call counts, the GPU object graph, shaders, validation errors, and common performance problems. It builds on the Local Capture API and produces the same capture files the DevTools Capture panel reads.
The plugin lives in claude-plugin/ — see
claude-plugin/README.md for full usage, the MCP tool
list, and configuration. It installs straight from this repository, which
doubles as a Claude Code plugin marketplace; the bridge server's dependencies
are vendored, so there is no npm install step. Requires Node.js 18+ and a
local Chrome or Edge install.
From any terminal, add this repo as a marketplace and install the plugin:
claude plugin marketplace add brendan-duncan/webgpu_inspector
claude plugin install webgpu-inspector@webgpu-inspector-pluginswebgpu-inspector is the plugin name; webgpu-inspector-plugins is the
marketplace name. The same steps work from inside Claude Code with
/plugin marketplace add brendan-duncan/webgpu_inspector then
/plugin install webgpu-inspector@webgpu-inspector-plugins (terminal CLI), or
the /plugins dialog in the VS Code / JetBrains extension. Claude Code starts
the bundled MCP server automatically once the plugin is enabled.
Updates are not automatic by default. When a new version is released, pull it in two steps — refresh the marketplace catalog, then update the plugin:
claude plugin marketplace update webgpu-inspector-plugins
claude plugin update webgpu-inspector@webgpu-inspector-pluginsThen run /reload-plugins (or restart) to load it. Check your installed
version with claude plugin list.
Auto-update is disabled by default for third-party marketplaces like this one.
The easiest way to enable it: open /plugin (terminal CLI) or /plugins
(VS Code / JetBrains extension), go to the Marketplaces tab, select
webgpu-inspector-plugins, and choose Enable auto-update.
Alternatively, enable it in ~/.claude/settings.json by declaring the
marketplace under extraKnownMarketplaces with "autoUpdate": true:
"extraKnownMarketplaces": {
"webgpu-inspector-plugins": {
"source": {
"source": "github",
"repo": "brendan-duncan/webgpu_inspector"
},
"autoUpdate": true
}
}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.
Update the plugin version from rollup.config.js.
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.
- WGSL Reflect
- Used for parsing and getting reflection information from WGSL shaders.
- WebGPU Recorder
- Used for generating recordings of WebGPU content.