Debug Utils 
Log and break on:
- Object property access
- Custom JavaScript and DOM events
- Method calls
- Callbacks
Install
Chrome extension
The easiest way to install is to grab the chrome extension which will add the
utility functions (described below) to your JavaScript console.
Script Tag
Grab du.js and add it in script tag to your page, which will make all the
the functions (described below) available globally.
Node.js
I haven't put much consideration into how will this work in node but I use it
for running the tests so it should probably work.
$ npm install debug_utils
var du = require('debug_utils');
du.$duv(object, 'foo');
// Make the functions available globally.
du.global();
$duv(object, 'bar');
Naming
I tried to name the functions so that they're memorable and easy to type. Here
are the rules that I followed for naming:
- All functions start with
$duto avoid conflicts. - Somewhat pronounceable to enable profits via word-of-mouth marketing.
- After
$duthere comes a single letter to hint at the functionality we are
debugging. e.g.$duv, v for events. lat the end of the function means 'log'. e.g.$duvl, log events.rat the end of the function name means 'remove'.
Event Debugging
As the complexity of a system grows, evented programming can make it very hard
to debug. The following utilities should help you:
$duv(object, event)
Attach an event handler that starts debugger when triggered.
Usesful for:
- Making sure the event is being triggered.
- Stepping through other event handlers.
- Finding out what triggered the event.
$duvl(object, event)
Attach an event handler that logs its arguments when fired.
Usesful for:
- Making sure the event is being fired with the correct args.
$duvr(object, event)
Remove previously set debug event handler.
Debugging Property Access
Often times you find that some object is changing from under your feet. And you
need to find out what is changing that object. These are utilities for you:
$dug(object, property)
Debug when something tries to get at a property of an object.
Useful for:
- Knowing which parts of the code is using your object.
- Tracking the value over calls and time.
$dugl(object, property)
Like $dug but adds logging instead of debugger.
$dugr(object, property)
Removes getters set by $dugl and $dug.
$dus(object, property)
Debug when something tries to set a property on an object.
Useful for:
- Knowing which parts of the code is mutating yo shit.
- Tracking values set over time.
$dusl(object, property)
Like $dus but adds logging instead of debugger.
$dusr(object, property)
Removes setters set by $dus or $dusl.
$dugs(object, property)
Debug both getter and setter. It's like calling $dug and $dus on an object.
$dugsl(object, property)
Like $dugs but adds logging instead.
$dugsr(object, property)
Removes getters and setters set by $dugs and $dugsl.
Method debugging
The JavaScript command line API provides really nice utilities for debugging
functions:
monitor,unmonitor: logs function calls.debug,undebug: adds a breakpoint on the first line of the function.
However, they don't work for native methods. The following should help:
$dum(object, method)
Wraps an object's method with a wrapper function with a debugger statement.
Useful for:
- Debugging native methods:
$dum(Event.prototype, 'preventDefault')
$duml(object, method)
Like $dum but logs arguments instead.
$dumr(object, method)
Removes debug or log wrappers added by $dum or $duml.
Debugging Callbacks
For APIs taking callbacks, it's really useful to be able to drop in a
logger or a debugger statement. The following functions are shorter to type out:
$dudebug
A function with a debugger statement.
xhr.onreadystatechange = $dudebug;
Useful for:
- Making sure callbacks are being called.
- Breaking on callback.
p.s. no pun intended.
$dulog
Similar to $dudebug but logs it's arguments instead of breaking.
$dulogm(message)
When called returns a function that logs it's arguments prefixed with message.
xhr.onreadystatechange = $dulogm('xhr readystate change');
License
MIT
Copyright (c) 2014 Amjad Masad amjad.masad@gmail.com