Visible Errors is a browser extension for Safari and Chrome, which shows you every JavaScript error on your pages visually, using a notification system similar to Growl. This can be used for developing web apps, when you may not always have the console open. The way JavaScript was designed, a single error doesn't necessarily stop execution of your web app. DOM events still execute, timers still fire, etc. Sometimes an error may be thrown but you may not even notice it. Visible Errors puts a stop to that. As a programmer, I want to see every error thrown by my apps, whether I have the console open or not.
Visible Errors shows notifications right in the page on which the errors occurred, in the top-right corner of the window. They have a “fixed” position, so they aren't affected by scrolling. If you have IFRAMEs in your app, they'll appear inside the frame, when appropriate. They look like this:
You can also customize which domains the extension is active for, so errors only appear on your servers, localhost, etc. Or you can enable errors on all domains, and see how many people have live sites with errors on them, haha. You'd be surprised how many do!
Each error will show for 10 seconds, then disappear. You can also click on errors to dismiss them at any time. They stack along the right side of the page or frame. If your code is generating a flood of errors, only 10 will show at a time. Also, they are de-duped so repeat errors are skipped entirely.
The extension is designed mainly to give you a notification that an error occurred, not provide all the debugging information (stack trace, etc.). Errors are still logged to the console, and that's where you should go if you see an error notification.
To configure which hostnames should show errors, edit the preferences of the extension in your browser of choice:
Safari
Go to Safari → Preferences → Extensions → Visible Errors
Chrome
Go to Window → Extensions → Visible Errors → click "Options".
Enter one or more comma-separated hostname match patterns (* is a wildcard), or leave blank to show errors on every site.
For example, to only show errors for local development and your own website, you could enter:
127.0.0.1, localhost, *.mydomain.com
Visible Errors is always enabled for local files (file://) viewed directly in the browser. However, please note that Safari appears to disable extensions for these types of files (grrrrr), so you'll have to run a local web server to use Visible Errors. Sorry!
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.