Staying Up

Ring Buffer

Wed, 30 Sep 2015 01:38:37 -0700

Lets say you want to keep track of the last 20 touch events to happen on your page or app, or want to track updates to your database so if something goes wrong you have a record of the last operations that happened to help debug the problem.

If you are unfamiliar with a ring buffer - they are a constant sized array which will start to overwrite itself from the beginning once it has gone past its bounds. In general a ring buffer is useful to efficiently keep track of the last N instances of something happening.

How does it work

The easiest explanation is an example:

var buffer = new RingBuffer(3);
buffer.push('A');
buffer.push('B');
buffer.push('C');
console.log('Raw Buffer: ', buffer._data); // Prints "Raw Buffer: [A, B, C]"
buffer.push('D');
console.log('Raw Buffer: ', buffer._data); // Prints "Raw Buffer: [D, B, C]"

Each entry added to the buffer goes into the _data array until it reaches the length limit. At this point, further entries will start getting inserted at the beginning of the array overwriting the oldest entries.

Source Code

(function ()
{

function RingBuffer(len)
{
    // Track the current location in the data array that new entries will be inserted into
    this._pointer = 0;

    // Buffer used to store data
    this._data = [ ];

    // Maximum number of entries that will be stored in the ring buffer
    this._limit = len;
};

RingBuffer.prototype =
{
    _computeIndex: function (offset)
    {
        return (this._limit + this._pointer + offset) % this._limit;
    },
    push: function (entry)
    {
        // Add the entry to the buffer
        this._data[this._pointer] = entry;

        // Once the data has been added to the buffer, ensure that the next insertion index is
        // still valid. In order to ensure that we do not run off the end of the buffer, restrict
        // the pointer to the bounds of the buffer. Once the pointer goes past the limit, it will
        // reset itself to the beginning of the array and start overwriting the oldest entries.
        this._pointer = this._computeIndex(1);
    },
    get: function (index)
    {
        var bufferIndex = this._computeIndex(index);

        return data[bufferIndex];
    },
    reset: function ()
    {
        this._pointer = 0;

        this._data = [ ];
    },
    setLimit: function (newLimit)
    {
        this._limit = newLimit;
    },
    getList: function ()
    {
        // There are two parts of the buffer that need to be connected together to get the data in
        // the buffer ordered correctly. Since the pointer is the index of the last inserted entry,
        // the oldest entries are those after the pointer in the array (if any) and the newest are
        // those that are before it.
        var newest = this._data.slice(this._pointer);
        var oldest = this._data.slice(0, this._pointer);

        return newest.concat(oldest);
    },
    print: function ()
    {
        var arr = this.getList();

        for (var i = 0; i < arr.length; ++i)
        {
            console.log('---- Entry [' + i + '] ----');
            console.log(arr[i]);
        }
    }
};

return RingBuffer;

})();

Object IDs

Tue, 22 Sep 2015 04:15:01 -0700

There are plenty of times where you have an object and would like to uniquely identify it, either to aid in debugging or to use the Unique ID (UID) as a lookup key. While extending built-in types is generally not a good idea, doing so to aid development and debugging is a worthwhile exception.

Why is this useful?

Occasionally while debugging you want to uniquely identify objects either for purposes of ensuring that you are looking at the same object at multiple point in your data flow, or using the objects’ UID to trigger a tracepoint (A breakpoint with a conditional - in this case a conditional on the object ID). Tracepoints are particularly useful when you are iterating over a large number of objects while only a specific one of them is causing an issue.

Explanation

Giving all objects a UID is easily done by taking advantage of the Object.defineProperty function (read more about it here). By defining new properties on Object.prototype, you guarantee that every object created will have a valid ID that is created on demand.

Source Code

if (typeof Object.prototype.uniqueID === 'undefined')
{
    // Counter that provides a unique ID for each object. Incremented on demand.
    var nextUniqueId = 0;

    // Non-visible and non-iterable property for an object that stores the UID
    Object.defineProperty(Object.prototype, '__uniqueID',
    {
        writable: true
    });

    // Non-writable accessor for an objects UID. Will generate and assign the UID
    // on demand.
    Object.defineProperty(Object.prototype, 'uniqueID',
    {
        get: function()
        {
            // Only ever generate and assign a single UID for an object
            if (this.__uniqueID === undefined)
            {
                this.__uniqueID = ++nextUniqueId;
            }

            return this.__uniqueID;
        }
    });
}

Remote Debugging

Mon, 21 Sep 2015 15:21:32 -0700

While remote debugging is becoming a feature supported in browsers, getting it up and running is still not a simple task - especially when the remote browser is not directly accessible to you. If all you need is access to the remote console, using JSConsole is an easy way to create a remote connection. This gives you enough access to print out the state of the current app/site and look at the state of the DOM.

What is happening

The code below will inject the JSConsole script into your page/app which will override the console.log function. Now any data that would be printed to the remote DevTools console will also be forwarded to a server at JSConsole which you can then connect your local browser to. The communication is done by a shared session where the remote client generates a key which is then shared and used by your local browser you are debugging with.

How to use JSConsole

[Remote Browser]

Start page/app, hit problem, panic!
Open DevTools
Call __CreateDebugSession() from the console
Stop doing things

[Local Browser]

Hear someone panicking!
Receive the [SessionKey] from the [Remote Browser]
Open http://jsconsole.com/remote.js?[SessionKey] in a new tab
Begin issuing console commands as if you were in DevTools

How to make this more useful

Because JSConsole is injected on the fly, it doesn’t have access to any previous logging. Keeping track of previous logs in an array or circular buffer would provide access to this information.
Maintaining a set of helper functions either in the window.rdbg variable below or in another module that can be used to quickly access app state from the console.
Generally refrain from querying for DOM elements directly as sending the data necessary to print them out to a remote server can be somewhat slow.
If you don’t want to use jsconsole.com, you can run your own server instance. Coupled with ngrok you can bypass using an uncontrolled service or just keep things faster if the remote browser is on your local network.

Source Code

var DEBUG = true;

function generateRemoteDebugKey()
{
    return 'RDebug' + (new Date()).getTime();
}

window.__CreateDebugSession = function (key)
{
    var debugKey = key || generateRemoteDebugKey();

    if (DEBUG)
    {
        console.log('Remote Debug Session: ' + debugKey);
    }
    else
    {
        // USER: Put reporting mechanism for reporting debugKey
    }

    addScript('http://jsconsole.com/remote.js?' + debugKey, 'rDebugScript');

    return 'Your remote debug session has started: ' + debugKey;
};

//
// Helper Functions
//

function addScript(filename, id, callback, error)
{
    var e = document.createElement('script');

    e.type = 'text/javascript';
    e.src = filename;

    if (id)
    {
        e.id = id;
    }

    if (callback || error)
    {
        readyStateCallback(e, callback, error);
    }

    if (typeof(e) !== 'undefined')
    {
        document.getElementsByTagName('head')[0].appendChild(e);
    }
};

function readyStateCallback(e, callback, error)
{
    e.onloadDone = false; // For Opera

    e.onload = function ()
    {
        e.onloadDone = true;

        if (callback)
        {
            callback();
        }
    };

    e.onreadystatechange = function ()
    {
        if (e.readyState === 'loaded' && !e.onloadDone)
        {
            e.onloadDone = true;

            if (callback)
            {
                callback();
            }
        }
    };

    if (error)
    {
        e.onerror = error;
    }
}

Have a different way of debugging remote apps/sites or comments/tips/tricks with using jsconsole, let me know!

Welcome!

Sat, 19 Sep 2015 06:39:22 -0700

Stay up with me to learn and explore.