WebGPU Inspector
Inspect . Capture . Record
Introduction
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 and object allocations over time, inspect textures (including pixel values), and edit and debug 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.
- Record — records all GPU commands and data used to render a set of frames, generating a self-contained HTML file (or compact binary) that can play back the render or be used for bug reports.
Developer Tools Window
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.
Extension Problem Solving
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
Chrome Web Store
Install WebGPU Inspector from the Chrome Web Store.
Firefox Add-Ons Store
Install WebGPU Inspector from the Firefox Add-Ons Store.
Claude Code Integration
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 JSON 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.
Install the Plugin
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-plugins
