Web Audio Inspector
Web Audio Inspector is a Chrome extension that adds a “Web Audio” panel to Developer Tools. This panel visualizes the
The wiki details how to use Web Audio Inspector.
No Support for ES6 Classes at the Moment
This extension breaks ES6 classes that extend subclasses of
AudioNode. See issue #73. Web Audio Inspector’s logic for overriding
AudioNode constructors disallows classes from
extending those constructors. We are trying to resolve this issue.
We welcome contributions. See the issues list, or suggest ideas. For starters, we currently have some usability and visualization issues that need owners.
- Review CONTRIBUTING.md. Note that Google requires contributors to sign a Contributors License Agreement.
- Set up 2-factor authentication for Github (as Google requires).
- Clone the repository with the
httpsaddress does not work with 2-factor authentication.
Build and run
Run the following commands in the project root directory.
npm install # Install Node modules gulp # Build the extension
Then load the
build directory as an unpacked Chrome extension.
The extension comprises of several scripts. Each script corresponds to a Closure entry point (JS file) within
- tracing.js: The tracing code is run before any scripts of a web page run. It adds tracking code to functions of the Web Audio API.
- inject-tracing.js: This script injects the tracing code (above) into a web page. It is a content script.
- background.js: The background script routes messages to and from various scripts. For instance, web audio updates from content scripts are routed to the corresponding dev tools scripts.
- dev-tools.js: The dev tools script is run when the user opens Chrome Developer Tools. The script adds a
Web Audiopanel to Developer Tools. It routes messages to logic within the panel.
- panel.js: This script manages the UI for the panel within Developer Tools. It uses JointJS for rendering graphs and dagre for layout.
- tab-page-changed.js: This simple script detects when the URL within a tab changes.
Tests reside in the
tests directory and use Closure’s jsunit library. Tests run in a web browser. Each test has a
_test.html file (which sets up DOM elements required by the test) and a
_test.js file (which contains the bulk testing logic). To run all tests at once,
npm installto update dependencies if you have not done so.
gulp testto start a static server. This command also uses your default browser (preferably Google Chrome) to open a web page (pictured below) for running all tests at once.
To run tests individually, you can use that UI as well, or you could visit the path to that test’s