Awesome
webgpu-devtools
WebGPU devtools is a Web browser extension that helps debug WebGPU applications by monitoring WebGPU usage.
Note: This project is still in the alpha stage. The WebGPU devtools may be unstable and buggy now. See the GitHub issues and inline random TODO comments for things that need work.
WebGPU
WebGPU is a new Web graphics API, which will be available by default in Chrome 113. Please refer to this page for details.
To try WebGPU use Chrome 113 (it is Chrome Beta at
writing this README on Apr.22.2023) or newer. Or enable WebGPU via chrome://flags on older Chromes.
How to install the WebGPU devtools
You can install the WebGPU devtools from the Chrome Web store
This project is still in the alpha stage. If you encounter any issue, please file an issue before sending 1-star review at the store :)
Demo video
Screenshots
<img src="./screenshots/devtools.png" alt="WebGPU devtools" width="640" /> <img src="./screenshots/buffer.png" alt="Show WebGPU buffer content" width="640" /> <img src="./screenshots/texture.png" alt="Show WebGPU texture content" width="640" /> <img src="./screenshots/framebuffer.png" alt="Show Framebuffer content" width="640" /> <img src="./screenshots/shader.png" alt="Show WGSL shader" width="640" /> <img src="./screenshots/command.png" alt="Show WebGPU commands" width="640" /> <img src="./screenshots/error.png" alt="WebGPU command error highlight" width="640" />Features
The Features of the WebGPU devtools are
- Track and show WebGPU objects
- Capture and show WebGPU commands
- Highlight WebGPU command errors
- Show WGSL shader code
- Show buffer, texture, and framebuffer contents
- Show WebGPU command call stacktrace
Upcoming features
Feel free to request features at the GitHub issues.
How to use
- Go to a WebGPU application web page (eg: Three.js WebGPU examples)
- Open WebGPU tab in the Developer tools
- Reload the web page
- The WebGPU devtools captures the WebGPU usage of the first 50 animation frames or 5 seconds (TODO: Make it configurable #4.)
- WebGPU usages are shown in the WebGPU devtools tab
If you want to capture another WebGPU application or capture the same application again, just move there or reload the page. The WebGPU devtools panel will be reset and updated. (See the "Known issues" section below if it doesn't work.)
The WebGPU devtools overrides WebGPU functions and tracks WebGPU objects. They may affect performance, memory usage, and functionality in WebGPU applications. You are recommened to enable the WebGPU devtools only when debugging.
How to build and install locally
If you want to locally build and install the WebGPU devtools, clone this repository
and then run npm install and npm run build commands.
$ git clone https://github.com/takahirox/webgpu-devtools.git
$ cd webgpu-devtools
$ npm install
$ npm run build
After that, manually load webgpu-devtools/extensions as an unpacked extension
in developer mode. Please refer to
this document.
Known issues
- WebGPU devtools panel is not updated sometimes even after finishing the capcuring. If you face this problem, try to reload the panel and application. Refer to #9 for details.
Also see the GitHub issues for others.
Contributions
This project is still in the alpha stage. There are a lot of things that need to be done. Contributions are very welcome. If you look for any issues to work on, find inline TODO comments or issues at the GitHub issues.
Also feel free to post any bug reports or feature requests at the GitHub issues.
The author is not a front-end engineer. Ideas or PRs for improving the UI are very welcome.
Disclaimer
This software is provided for debugging purposes only. This software is not intended to be used to steal WebGPU application contents.
This software is provided "as is" without warranty of any kind, either express or implied, including but not limited to the implied warranties of merchantability and fitness for a particular purpose. The author shall not be liable for any damages whatsoever arising out of the use of this software, even if the author has been advised of the possibility of such damages.