Never Pay your Mortgage

    debug_utils

    0.4.0 • Public • Published

    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 $du to avoid conflicts.
    • Somewhat pronounceable to enable profits via word-of-mouth marketing.
    • After $du there comes a single letter to hint at the functionality we are debugging. e.g. $duv, v for events.
    • l at the end of the function means 'log'. e.g. $duvl, log events.
    • r at 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

    Keywords

    Install

    npm i debug_utils

    DownloadsWeekly Downloads

    5

    Version

    0.4.0

    License

    MIT

    Last publish

    Collaborators

    • amasad