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]

  1. Start page/app, hit problem, panic!

  2. Open DevTools

  3. Call __CreateDebugSession() from the console

  4. Stop doing things

[Local Browser]

  1. Hear someone panicking!

  2. Receive the [SessionKey] from the [Remote Browser]

  3. Open http://jsconsole.com/remote.js?[SessionKey] in a new tab

  4. 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!