Console.io

JavaScript Remote Web Console


Project maintained by nkashyap Hosted on GitHub Pages — Theme by mattgraham

Console.IO

Build Status Nodejitsu Deploy Status Badges

Console.IO is a NodeJS project. It provides Remote Web Console for websites and web applications. It uses express.io (express & socket.io) to provide user real time experience.

It works pretty much on all modern browsers, mobile devices, Smart TVs, etc

Tested on:

INSTALLATION

NPM

npm install -g xconsole.io

Source (install.bat for windows users)

npm install

START SERVER

NPM

consoleio

Source (start.bat for window users)

node ./server/main.js

USAGE

Include Script directly

<script type="text/javascript" src="http://<console.io server>/console.io.js"></script>

Via RequireJS

    //requirejs bootstrap file

    requirejs.config({
        baseUrl: './',
        paths: {
            "socket.io": "<console.io server>/socket.io/socket.io",
            "console.io": "<console.io server>/console.io"
        }
    });

    // usage
    define(['console.io'], function (consoleio) {
        consoleio.configure({});
    });

CONFIGURATION

Config Object (Works only when script is included directly)

Create a config object on ConsoleIO but note that it only works when script is included directly not via RequireJS.

window.ConsoleIO = window.ConsoleIO || {};

window.ConsoleIO.config = {
    url: "<console.io server>",
    base: "",

    // optionals
    secure: false,

    nativeConsole: true,
    web: false,  // true to display web console
    webOnly: false, // true for web console mode only

    // Web console config
    filters: ['log','error'],
    search: 'test',
    pageSize: 100,

    // Web UI config
    docked: false,
    position: 'bottom',
    height: '300px',
    width: '99%'
};

QueryString Parameters (Works only when script is included directly)

Pass list of configurations options in the query strings parameters like given below. Any query string parameters in the location bar will overwrite file query strings parameters. Note that it only works when script is included directly not via RequireJS.

<script type="text/javascript" src="http://<console.io server>/console.io.js?url=<console.io server>"></script>

Configurations when loaded via RequireJS

define(['console.io'], function (consoleio) {
    consoleio.configure({
        url: "<console.io server>",
        base: "",

        // optionals
        secure: false,

        nativeConsole: true,
        web: false,
        webOnly: false,

        // Web console config
        filters: ['log','error'],
        search: 'test',
        pageSize: 100,

        // Web UI config
        docked: false,
        position: 'bottom',
        height: '300px',
        width: '99%'
    });
});

NOTE: It can also capture iframe logs. To do that just include console.io.js script file in the child document.

Visit http:/// for ConsoleIO interface (Tested on Chrome Browsers)

Console.IO

Status tab

Source tab

Preview tab

Console tab

NOTE:

APPLICATION

Editor

Commands/Scripts can be execute on connected client from application.

Shortcuts:

NOTE: All multilines code should be wrapped within self executable function. E.G

(function doSomeThing(){
 .......
}())

Device and Tabs

Web console

CONSOLE API

TODO

SERVER CONFIGURATION

All server side configurations are defined in server/config.js file. If you have install using npm -g then you will find it in C:\Users[USERNAME]\AppData\Roaming\npm\node_modules\xconsole.io\server folder

Server Port

You can change default (8082) port number

express: {
    production: {
        ...
        { 'port-number': 8082 },
        { 'session-key': 'console.io' },
        ...
    }
}

SSL Support

Change following in server side config file to enable server to run over SSL and use "https" instead of "http" to inject files on client. To generate your own SSL Certificate please check this How to generate custom SSL certificates.

var config = {
    .....
    https: {
        enable: true, // change true/false to enable and disable SSL
        key: './server/certificates/server.key',
        certificate: './server/certificates/server.crt',
        ca: './server/certificates/ca.crt'
    },
    .....
}

And change console.io config as follows

{
    ....
    secure: true,
    .....
}

IISNODE

Console.IO can be hosted inside IIS. It allows to bypass SSL self-signed certificate issue.

INSTALL

NOTE: Only IIS8 supports websockets therefore Console.IO is configured to used xhr-polling by default

IIS NODE.

USAGE

Include Script directly
<script type="text/javascript" src="/console.io/console.io.js"></script>
Via RequireJS
    //requirejs bootstrap file

    requirejs.config({
        baseUrl: './',
        paths: {
            "socket.io": "/console.io/socket.io/socket.io",
            "console.io": "/console.io/console.io"
        }
    });

    // usage
    define(['console.io'], function (consoleio) {
        consoleio.configure({});
    });

PROFILER

Profile support is now added in Console.IO. Profile tab is only displayed when profiler is enabled and it can only enabled from client side.

NOTE:it only works when files are loaded using RequireJS at the moment.

Enabling profiler from client

Include Script directly
<script type="text/javascript" src="/console.io/console.io.js?profile=true&excludes=folder1,folder2"></script>
Via RequireJS
    // usage
    define(['console.io'], function (consoleio) {
        consoleio.configure({
            profile: true,
            excludes: ['folder1','folder2']
        });
    });

Fix regex issue in node dependency

Add following lines at 1408 in /node_modules/escodegen/escodegen.js

if (expr.value.toString() === '[object Object]' && expr.raw) {
    expr.value = expr.raw;
}

ANGULARJS

Example to setup AngularJS global $http error handler

angular.module('app', ['ngResource',])
    .config(function ($httpProvider)
    {
        $httpProvider.responseInterceptors.push(function globalErrorHandling($q) {
            return function(promise) {
                return promise.then(function(successResponse) {
                    console.info(successResponse);
                    return successResponse;

                }, function(errorResponse) {
                    console.exception(errorResponse);
                    return $q.reject(errorResponse);
                });
            };
        });
    });
});

TODO

COPYRIGHT AND LICENSE

MIT LICENSE

REFERENCE