Provide some features helpful for WebGPU Development

Latest Version

Version

0.0.18

Update

November 6, 2024

Size

255KiB

Developer

WebGPU Dev Extension Extension

Features:

* Print Debug Errors at their source.
* Throw on encoder errors
* Dump Shaders of WebGPU programs
* Show entire shader on shader error
* Log which type of GPU is being used on requestAdapter
* Force low-power or high-performance GPU
* Show how many devices are currently active on the page
* Add Descriptors to Objects
* Show bit names for GPUTexture.usage and GPUBuffer.usage in DevTools
* Block Features
* Disable WebGPU (to test your fallback)
* Remove WebGPU (to test your fallback)
* Add API Breakpoints
* skip rAF frames
* multiply time

Details

* Print Debug Errors at their Source

Errors in WebGPU are usually handled asynchronously which means the actual command that generated the error is often unknown. This extension adds early error checking so that hopefully you'll get an error stack at the place the error was generated making it easier to fix bugs

* Throw on Encoder Errors

Normally command buffer encoders, pass encoders, render bundle encoders only
generate an error when you finish the command encoder. Enable the WebGPU-Debug-Helper
to throw on these types of errors.

* Dump Shaders of WebGPU programs

See the shader of the current page.

* Log which type of GPU is being used on requestAdapter

Prints the adapterInfo on each call to requestAdapter. This lets you see which GPU was used on a dual GPU machine as well as if compatibility mode was requested.

* Force low-power or high-performance GPU

Force low-power or high-performance GPU selection for a page.

* Show how many devices are currently active on the page

Prints a running total of the number of devices currently active on a page.

* Add Descriptors to Objects

Adds the descriptors used to create many objects to those objects. For example: When you call `createView` on a texture you pass in a descriptor. That descriptor is
not reflected in the view itself which can make it hard to see what's going on.
This adds that data onto the view so you can inspect it in the debugger or in the error messages printed by \"Show Errors\". Similarly, bindGroups, bindGroupLayouts,
pipelines, pipelineLayouts, pass encoders, query sets, samplers, shader modules,
external textures, ...

* Block Features

Lets you block webgpu features. For example, type in `shader-f16` and the shader-f16 feature will be blocked. You can use this to test that your code, that is supposed to run without the feature, actually runs without the feature.

* Disable or Remove the WebGPU API

Lets you test that you gracefully handle both the API returning null and the API not existing.

* API Breakpoints

Adds a `debugger` statement to the specified WebGPU API functions. Want to know where the page is calling importExternalTexture? Add a breakpoint.

Source at https://github.com/greggman/webgpu-dev-extension

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "WebGPU Dev Extension", "version": "0.0.18", "manifest_version": 3, "description": "Provide some features helpful for WebGPU Development", "default_locale": "en", "minimum_chrome_version": "113", "permissions": [ "activeTab", "scripting" ], "web_accessible_resources": [ { "resources": [ "scripts/add-descriptors.js", "scripts/auto-label.js", "scripts/breakpoints.js", "scripts/block-features.js", "scripts/count-devices.js", "scripts/custom-formatters.js", "scripts/disable-webgpu.js", "scripts/dump-shaders.js", "scripts/force-compatibility-mode.js", "scripts/force-fallback-adapter.js", "scripts/force-high-performance.js", "scripts/force-low-power.js", "scripts/gpu-injected.js", "scripts/raf-skip-frames.js", "scripts/remove-webgpu.js", "scripts/show-adapter-info.js", "scripts/show-errors.js", "scripts/show-shader-errors.js", "scripts/track-pass-state.js", "scripts/webgpu-compat-validation.js", "scripts/webgpu-debug-helper.js", "scripts/webgpu_recorder.js" ], "matches": ["*://*/*"] } ], "content_scripts": [ { "matches": [""], "js": ["scripts/gpu-content-script.js"], "run_at": "document_start", "all_frames": true } ], "action": { "default_popup": "popup.html", "default_icon": { "16": "/images/icon-16.png", "32": "/images/icon-32.png", "48": "/images/icon-48.png", "128": "/images/icon-128.png", "512": "/images/icon-512.png" } }, "icons": { "16": "/images/icon-16.png", "32": "/images/icon-32.png", "48": "/images/icon-48.png", "128": "/images/icon-128.png", "512": "/images/icon-512.png" }}

Download CRX(255KiB)