Console.Re | Remote JavaScript Development Console

About Console.Re

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 <script> tag

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

<script src="//console.re/connector.js" data-channel="YOUR-CHANNEL-NAME" id="consolerescript"></script>

Show example

<!DOCTYPE html>
<html>
  <head>
    <script src="//console.re/connector.js" data-channel="my-website-channel" id="consolerescript"></script>
    <script src="/js/lib/jquery.js"></script>
    <script src="/js/your-script1.js"></script>
    <script src="/js/your-script2.js"></script>
  ...

2) [required] change YOUR-CHANNEL-NAME in attribute data-channel to 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.onreadystatechange=s.onload=function(){if(!l){c();}l=true;};d.getElementsByTagName('head')[0].appendChild(s);}
};

2) [required] change YOUR-CHANNEL-NAME in key channel to your-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

Random Channel Name

You can directly open random channel name using shortcut url http://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 or DOM 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 given selector(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 given selector(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 included screen 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 given label.

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>
 <div class="test">
  <p class="t4">test 4</p>
 </div>
 ...
 <div class="test-two">
  <p class="t8">test-two 4</p>
 </div>
</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

Private Servers

For moderate use, you can connect and see your logging information on public server at http://console.re for FREE. No registration required. Just install connector script and use any string as your channel name.

All information sent to the public server will be open for anyone who knows your channel name.

If you need private and more secure solution, we can offer a dedicated or virtual servers for personal or corporate usage. We can provide a complete solution where you can use your own Remote JavaScript Console server installed behide your firewall, inside your private network.

If you are interested, please contact us with additional information about your company size and approximate number of users.

In addition, we can provide custom solution with full support for the large clients. We can customize logger server software and connector API to fit customers' unique needs.

CONTACT US

Feel free to contact us with any questions, feedback, bug reporting, feature request or if you are interested in private server solution, its distribution, commercial usage and support.

TWITTER

FACEBOOK

GITHUB

http://console.re/new
|
create new random channel

Supported Platforms

Desktop browsers:

Mobile browsers:

Servers:

Features

Install with single <script> tag

Install with inline JavaScript code

Installation for Node.Js

Random Channel Name

console.re.log()

console.re.info()

console.re.warn()

console.re.debug()

console.re.error()

console.re.size()

console.re.css()

console.re.media()

console.re.time()

console.re.timeEnd()

console.re.count()

console.re.test()

console.re.assert()

console.re.trace()

console.re.clear()

Follow US