Console.IO

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:

Toshiba TV (2011, 2012, 2013)
LG NetCast TV (2011, 2012, 2013)
Philips NetTV (2011, 2012, 2013)
Samsung TV (2010, 2011, 2012, 2013)
Panasonic TV (2012, 2013)
Technika Avtrex STB
Sony (BDP-S4100)
Hopper Dish (Hopper)
Firefox, Safari, Opera, Chrome, Maple, PhantomJS and IE
iPhone, iPod, iPad, Android browser, windows 8 phone etc

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://<console.io server>/ for ConsoleIO interface (Tested on Chrome Browsers)

NOTE:

Device is registered and connected.
Device is registered but offline.
Device is subscribed (double click on Online icon to subscribe).
web console icon to enable/disable web remotely.

APPLICATION

Editor

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

Shortcuts:

Ctrl+Enter: execute command
Ctrl+Space: autocomplate
Ctrl-Q: toggle comments
Shift-Ctrl-Q: fold/unfold code
Ctrl-F / Cmd-F: Start searching
Ctrl-G / Cmd-G: Find next
Shift-Ctrl-G / Shift-Cmd-G: Find previous
Shift-Ctrl-F / Cmd-Option-F: Replace
Shift-Ctrl-R / Shift-Cmd-Option-F: Replace all

Device and Tabs

Files: Show all attached javascript and css files in the web page
Status: Device Status and some basic information
Source: Double click on a file in file explorer to view file content
Preview: HTML dom structure
Console: Remote console
- Pause incoming logs
- Clear logs
- Export logs
- Change page size
- Search word or use regex to filter logs
- Filter logs by type

Web console

Control it remotely
- Pause incoming logs
- Clear logs
- Change page size
- Search word or use regex to filter logs
- Filter logs by type
TODO
- Ability to configure height, width, position & remote control.
- Control logging speed
- Scroll through logs (Smart Tv/mobile/tablets)

CONSOLE API

console.assert(x)
console.count(key)
console.time(name, reset)
console.timeEnd(name)
console.debug(arguments...)
console.warn(arguments...)
console.info(arguments...)
console.log(arguments...)
console.dir(object)
console.dirxml(HTML Element)
console.error(error)
console.exception(error)
console.trace()
console.profile() // works only when client is enabled with profiler mode
console.profileEnd() // works only when client is enabled with profiler mode

TODO

console.group()
console.groupCollapsed()
console.groupEnd()
console.markTimeline()
console.timestamp()

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

Install x64 node from http://nodejs.org/download/
Install x64 iisnode from https://github.com/tjanczuk/iisnode
IIS URL Rewrite module
Add Web Application inside a website and set it to console.io source directory
Navigate to https://[your machine name]/console.io/ to access console.io application.

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

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

Add JSDoc & Unit Tests
Support scaling

COPYRIGHT AND LICENSE

MIT LICENSE

REFERENCE

[Javascript Stacktrace] (https://github.com/eriwen/javascript-stacktrace)
[codemirror] (http://codemirror.net/)
[express.io] (https://github.com/techpines/express.io)
[Socket.io] (http://socket.io/#how-to-use)
[prettify] (https://code.google.com/p/google-code-prettify/)
[dhtmlx] (http://dhtmlx.com/) [GPL LICENSE]
[OpenSSL] (http://www.openssl.org/)
[Html2Canvas] (http://html2canvas.hertzen.com/)
[Grunt] (http://gruntjs.com/)
[uglify-js] (https://github.com/mishoo/UglifyJS/)
[js-beautify] (https://github.com/einars/js-beautify/)

nkashyap/console.io

Console.IO

INSTALLATION

NPM

Source (install.bat for windows users)

START SERVER

NPM

Source (start.bat for window users)

USAGE

Include Script directly

Via RequireJS

CONFIGURATION

Config Object (Works only when script is included directly)

QueryString Parameters (Works only when script is included directly)

Configurations when loaded via RequireJS

APPLICATION

Editor

Device and Tabs

Web console

CONSOLE API

TODO

SERVER CONFIGURATION

Server Port

SSL Support

IISNODE

INSTALL

USAGE

Include Script directly

Via RequireJS

PROFILER

Enabling profiler from client

Include Script directly

Via RequireJS

Fix regex issue in node dependency

ANGULARJS

TODO

COPYRIGHT AND LICENSE

REFERENCE