Console.re (Remote js console)


 

Console.Re is remote JavaScript development console. You can send log, debug or test information from any webpage, web mobile app or node.js server to remote logger and view results on any device: tablet, phone or desktop in a separate browser window.

Connector script extends console object adding new methods for sending messages to remote logger with:

console.re.log(); console.re.info(); console.re.debug(); console.re.warn(); console.re.error(); console.re.count(); console.re.test(); console.re.assert(); console.re.time(); console.re.timeEnd(); console.re.trace(); console.re.clear();

Moreover, while using in browsers, you can log information about DOM elements, CSS properties, track Media Queries and Window size changes with:

console.re.size(); console.re.css(); console.re.media();

Supported Platforms

Connector (client) script works in all major browsers (desktop or mobile) and node.js servers running on Linux, Mac, and Windows.

Desktop browsers:
  • Internet Explorer 6+
  • Google Chrome 4+
  • Mozilla Firefox 3+
  • Apple Safari 3+
  • Opera 10+
Mobile browsers:
  • iPhone Safari
  • iPad Safari
  • Android WebKit
  • WebOs WebKit
  • Smart TV
Servers:
  • Node.js
  • Shell via Command Line Interface
Features
  • Realtime, cross browser development and device independent testing
  • Remote logging and debugging with extended console API
  • View logs on any mobile device, tablet or phones (iOS, Android, Windows)
  • Easy to read, log output for Objects, Array, JSON, HTML and CSS
  • Faster Responsive Design development with Media Query logging and tracking
  • Watch Media Query changes on browser resize and device orientation change
  • Using [BBcodes] display log information in different styles and colors
  • Better logging output with string and number interpolation using %s and %d
  • Connector script is light, framework independent, pure JavaScript solution
  • Supports major browsers and can be used for desktop and mobile web apps
  • Works on server in Node.js running on Linux, Mac, Windows
  • Command line (CLI) on server allows to send remote logs from OS shell

Enjoy faster web development process!

How to install

First, install connector script then use Console API from your JavaScript.

Install with single tag

1) open your main HTML file and include connector.js script FIRST thing in tag or BEFORE any other scripts:


Show example

2) [required] change YOUR-CHANNEL-NAME in attribute data-channelto your-project-channel-name (any string), save HTML file.

3) add in your JavaScript code:

console.re.log('remote log test');

4) open console remote logger in a separate browser on your favorite device: http://console.re/your-project-channel-name

5) reload your webpage or app and you should see in logger the following output: [LOG] remote log test

Install with inline JavaScript code

1) in case you don’t have access to head, include this code BEFORE your JavaScript:

var consolere = {
  channel:'YOUR-CHANNEL-NAME',
  api:'//console.re/connector.js',
  ready: function(c) {var d=document,s=d.createElement('script'),l;s.src=this.api;s.id='consolerescript';s.setAttribute('data-channel', this.channel);s.onreadystatechange=s.onload=function(){if(!l){c();}l=true;};d.getElementsByTagName('head')[0].appendChild(s);}
};

2) [required] change YOUR-CHANNEL-NAME in key channel toyour-project-channel-name (any string)

3) in your JavaScript code, use consolere.ready() callback to wrap console.re API:

consolere.ready(function() {
  console.re.log('remote log test');
});

4) open console remote logger in a separate browser on your favorite device: http://console.re/your-project-channel-name

5) reload your webpage or app and you should see in logger the following output: [LOG] remote log test

Installation for Node.Js

1) Install console-remote-client module using npm:

$ npm install console-remote-client

2) In your node.js app, use require to include module and connect to remote server:

var consolere = require('console-remote-client').connect('console.re','80','YOUR-CHANNEL-NAME');

3) [required] change connect function argument YOUR-CHANNEL-NAME to your own your-project-channel-name (any string)

4) add in your code:

console.re.log('remote log test');

4) open console remote logger in a separate browser on your favorite device: http://console.re/your-project-channel-name

5) restart your node.js app, and you should see in logger the following output: [LOG] remote log test

Command Line (CLI)

Install it globally with npm using:

$ npm install console-remote-client -g

or get local copy and use npm link:

$ git clone https://github.com/kurdin/console-remote.git
$ cd console-remote
$ npm link

Run with:

$ consolere -c YOUR-CHANNEL-NAME log 'sent from command line' 

where you need to change -c option YOUR-CHANNEL-NAME to your project-channel-name (any string)You can edit ./console-remote-client/bin/config.js and permanently change YOUR-CHANNEL-NAME then you can run it without -c option:

$ consolere info 'sent from command line'

to see all available options and commands, use consolere –help

Update Node.Js and CLI client

With release of new version please update console-remote-clientmodule using npm:

$ npm update console-remote-client

If you using CLI please update console-remote-client module usingnpm with global argument:

$ npm update console-remote-client -g
Random Channel Name

You can directly open random channel name using shortcut urlhttp://console.re/new, then click on How to Connect? link to see connection instruction.

Console.Re API

console.re.log()

Sends LOG level message with object, array, string, number orDOM Element to the remote console.

console.re.log(object|array|selector|'string %s',string|'string %d',number[,object, ...]);
console.re.info()

Sends INFO level message to remote console with optional arguments same as console.re.log().

console.re.info(message);
console.re.warn()

Sends WARN level message to remote console with optional arguments same as console.re.log().

console.re.warn(message);
console.re.debug()

Sends DEBUG level message to remote console with optional arguments same as console.re.log().

console.re.debug(message);
console.re.error()

Sends ERROR level message to remote console with optional arguments same as console.re.log().

console.re.error(message);
console.re.size()

Displays size of DOM element(s), width and height for givenselector(s) or displays current Window size if called with no arguments. Use any jQuery selectors if jQuery library included in project. Browser only API.

console.re.size([selector],[,selector,...]);
console.re.css()

Displays value of specified CSS properties in array for givenselector(s). Use any jQuery selectors if jQuery library included in project. Browser only API.

console.re.css(selector,['property','property2', ... 'propertyN']);
console.re.media()

Displays value of CSS Media Queries for current Window size. An optional ‘watch’ argument sets listener to display value of Media Queries on browser’s resize or device’s orientation change events.Browser only API.

console.re.media(['watch']);

Displays all types of Media Queries for current Window size includedscreen and print. Browser only API.

console.re.media(['all']);
console.re.time()

Creates a new timer under the given label. To stop timer and display time result, call console.re.timeEnd(label); with the same label.

console.re.time(label);
console.re.timeEnd()

Stops timer and displays time result started before with givenlabel.

console.re.timeEnd(label);
console.re.count()

Displays the number of times count call with given label was executed.

console.re.count(label);
console.re.test()

Displays result of test for given expression, object, string,array, number.

console.re.test('expression|string|array|object|number'[,object, ...]);
console.re.assert()

Tests if a given expression is true. Only if false, it will display an error message.

console.re.assert(expression[, object, ...],[message]);
console.re.trace()

Displays stack trace of JavaScript execution at the point where it was called.

console.re.trace();
console.re.clear()

Clears remote console logs.

console.re.clear();

Usage Examples

Remote logging String or Number value with interpolation.

var str = 'Test', num = 43;
console.re.log('This is a string %s and number %d', str, num);

// Remote Logger Output
[LOG] This is a string 'Test' and number 43
            

Try it HERE or jsFiddle

Remote logging {Object} and its content.

var obj = {key1:1,key2:2,key3:3};
console.re.log('This is an %s', obj);

// Remote Logger Output
[LOG] This is an {Object}
// clicking on {Object} opens its content
{
    "key1": 1,
    "key2": 2,
    "key3": 3
}            

Try it HERE or jsFiddle

Remote logging [Array] and its content.

var arr = ['element1','element2','element3'];
console.re.log('This is an %s', arr);

// Remote Logger Output
[LOG] This is an [Array]
// clicking on [Array] opens its content
[
    "element1",
    "element2",
    "element3"
]            

Try it HERE or jsFiddle

Remote logging DOM elements and its HTML content with JavaScript or jQuery selectors.

console.re.log('This is an %s', document.body, 'Paragraphs %s:', $('p'));

// Remote Logger Output
[LOG] This is an <BODY Element>,Paragraphs [Array Elements]
// clicking on <BODY Element> opens its HTML content
<body>
 

test 4

...

test-two 4

</body>

Try it HERE or jsFiddle

Remote logging test results for given expression.

console.re.test("1!==1","'this string'","[1,2,3,4,5,6]","document.body");

// Remote Logger Output
[TEST] 1!==1 is false,'this string' is "String",[1,2,3,4,5,6] is [Array],document.body is <BODY Element>‌

Try it HERE or jsFiddle

Remote logging message if a given expression is not true.

console.re.assert(1!==1, 'It is not true');

// Remote Logger Output
[ASSERT] It is not true

Try it HERE or jsFiddle

Remote logging time passed between timer start and end calls with the same label.

console.re.time('1000000-loops');
for (var i = 0; i < 1000000; i++) {
  var b = document.body;
}
console.re.timeEnd('1000000-loops');

// Remote Logger Output
[TIME] 1000000-loops,started‌
[TIME] 1000000-loops,ends in 31 ms‌

Try it HERE or jsFiddle

Remote logging number of times counter called with the same label.

for (var i = 0; i < 10; i++) {
  var b = document.body;
  console.re.count('loop number:%d');
}

// Remote Logger Output
[COUNT] loop number:1‌
[COUNT] loop number:2‌
[COUNT] loop number:3‌
...
[COUNT] loop number:10

Try it HERE or jsFiddle

Remote logging size in pixels of DOM elements or Window.

// get Window size
console.re.size();
// get size of all P elements
console.re.size('all P elements %s', document.getElementsByTagName('p')); 
// get size of DIV elements with class 'test' using jQuery
console.re.size($('div.test')[0]);

// Remote Logger Output
[SIZE] Window Size: 1274px by 683px‌
[SIZE] all P elements [Array]
[SIZE] <DIV> 300px by 250px

Note: using jQuery selectors requires jQuery library to be included in your project.

Try it HERE or jsFiddle

Remote logging CSS properties for specified DOM elements.

// get value of CSS property 'background-color' of <body>
console.re.css(document.body, 'background-color');
// get value of CSS properties 'border' and 'color' for all P elements
console.re.css('P elements %s', document.getElementsByTagName('p'), ['border','color']);
// get value of CSS property 'margin' and 'padding' using jQuery
console.re.css('DIV.test %s', $('div.test'), ['margin','padding']); 

// Remote Logger Output
[CSS] <BODY> background-color:rgb(255, 255, 255);
[CSS] P elements [Array]
[CSS] DIV.test [Array]
// clicking on [Array] opens value of CSS properties
[
    {
        "margin": "20px",
        "padding": "10px"
    }
]

Note: using jQuery selectors requires jQuery library to be included in your project.

Try it HERE or jsFiddle

Remote logging Media Query rules used for current Window size.

// get applied Media Query rulers for current Window size
console.re.media();
// get all types of Media Query applied, including print and screen 
console.re.media('all');
// get applied Media Query rulers and send updates on Window resize or device orientation change
console.re.media('watch');

// Remote Logger Output for each line
[MEDIA] screen and (max-width: 1080px) and (min-width: 320px)‌

Try it HERE or jsFiddle

Remote logging JavaScript Stack Trace information.

(function test(){
  console.re.trace('Stack Trace');
})();

// Remote Logger Output
[TRACE] Stack Trace, [Array]
// clicking on [Array] opens current line stack trace information
[    ...
    "test@http://fiddle.jshell.net/_display/:90:13",
    "HTMLIFrameElement.fload@http://fiddle.jshell.net/_display/:91:3"
]

Try it HERE or jsFiddle

Using [BBcodes] you can send message to remote logger in styles, colors and size:

console.re.error('output [i]any[/i] [size=15]errors[/size] using [red]Error log level[/red]');
console.re.info('output anything in colors: [red]%s[/red] [green]%s[/green] [blue]%s[/blue] [yellow]%s[/yellow] [orange]%s[/orange] [lime]%s[/lime] [white]%s[/white] [black]%s[/black]', 'red', 'green', 'blue', 'yellow',  'orange', 'lime', 'white', 'black');

Try it HERE or jsFiddle

List of available [BBcodes]:

    styles:

  • [b]bold[/b] [i]italic[/i] [u]underline[/u][s]strike-through[/s] [size=X]1-20[/size]colors:
  • [red] [green] [blue] [yellow] [orange] [lime] [white][black]

Clearing remote logger console before sending a new messages.

console.re.clear();
console.re.info('first info message');
console.re.log('second log message');

// Remote Logger Output
[INFO] 'first info message'
[LOG] 'second log message'

Try it HERE or jsFiddle

Try all-in-one Console.Re API Demo on jsFiddle

Happy Coding Smile

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s