A minimal auditory debugger for web pages.
There are two possible ways to install this extension:
From the Chrome Web Store - TBD / Waiting for the Chrome store review. Meanwhile, use the manual installation below
Clone or download this project
Go to your extensions page: chrome://extensions/
Check the "Developer mode" box in the top right
Click on the "Load unpacked extension..." button from the dropdown and point it to the unzipped extension directory that you just downloaded/cloned.
The original source code is over there. I didn't like the idea at first because I didn't find it useful, then another user (@SeriousM) suggested to make it trigger on network activity too.
That was more interesting. I did some research on this and figured it's possible, so I turned it into a Chrome extension.
Initially, I decided to leave out the dom event listener feature but it's been a while since I created a Chrome extension and I felt rusty. So the pragmatic programmer in me decided to start with this feature and then add the new one later.
As soon as it became an extension, I realized how useful this feature actually is... not for debugging, but for monitoring and maybe even reverse engineering. Not just your own website, but any website.
It was interesting to hear elements being created on my Quora reading list even though I wasn't doing anything. It was also interesting to hear the Plink Plonk go everytime the visibility of the typing indicator of the online Github editor toggled.
I'll be working on it every Sunday and will accept any useful pull request.
- Fires on every dom changes
- Allows to quickly deactivate it instead of removing it from Chrome - TBD
- Fires on every network request - TBD
- Fires on every console log - TBD
- Allows to select what to hear sound for (Network or Dom Changes or Console logs) - TBD
- Allows to update delay and frequency on the fly - TBD
- Allows to make it sound more futuristic (by making the pitch of a single oscillator longer) - TBD
- Display a sticky pulsing circle on the page to provide sound visualization - TBD
- Allows to select whether you want sound visualization - TBD
- Port it to Firefox - TBD
- Add a license
- Investigate the AudioContext error about resuming/creating sound on user interaction
- Create a better icon/logo
Props to the author of the original script: @tomhicks.
Icon and logo made with the elegant Pixlr tool. I could do better, but I was going fast.
If you have any questions, just send me a tweet. For improvement suggestions or bugs, open an issue with the appropriate tag. Pull requests are always welcome :)
Enjoy.