Console.Re | Remote JavaScript Console

About Console.Re

Console.Re is remote JavaScript 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.type() console.re.timeEnd() console.re.now() console.re.trace() console.re.clear() console.re.mark()

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()

What's New

Console API has new methods.

You can send more information from client to logger with:

console.re.now(label) - returns the relative distance between two time points, measured in milliseconds

console.re.type() - returns the type of a variable or property

console.re.mark([label]) - action to mark current log position in console output with optional label

Console connector has a new options:

redirectDefaultConsoleToRemote - (:boolean) if true, default calls to console.[log|warn|error|debug] methods will be redirected to remote console log calls

disableDefaultConsoleOutput (:boolean) - if true, default console log output will be removed for all remote console log calls

server (:string) - remote console server full url, to connect and output remote logs to another remote console server, default is http://console re

Console API shortcuts:

relog() shortcut for console.re.log()

Instead of using console.re.log('test'), now you can use a shortcut relog('test')

re.[api]() shortcut for console.re.[api]()

Instead of using console.re.log('test'), now you can use a shortcut re.log('test') or console.re.test('test') has shortcuts re.test('test')

console.re.[api] shortcuts

Instead of using console.re.log('test'), now you can use a shortcut console.re.l('test') or re.l('test')

Full list of API shortcuts

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:

Microsoft Edge 1+
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" data-server="OPTIONAL-PRIVATE-SERVER-URL" id="consolerescript"></script>

Show example

<!DOCTYPE html>
<html>
  <head>
  <script
    src="//console.re/connector.js?v=2"
    id="consolerescript"
    data-server="http://console.re"
    data-channel="YOUR-CHANNEL-NAME"
    data-options="redirectDefaultConsoleToRemote"
  ></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 import (recommended)

1) install console-remote-client module:

npm install console-remote-client

2) import once into your javascript file. (in your app root index.js file)

import consolere from 'console-remote-client'

3) connect with options for your server and channel:

consolere.connect({
  server: 'https://console.re', // optional, default: https://console.re
  channel: 'YOUR-CHANNEL-NAME', // required
  redirectDefaultConsoleToRemote: true, // optional, default: false
  disableDefaultConsoleOutput: true, // optional, default: false
});

4) [required] change YOUR-CHANNEL-NAME in attribute data-channel to your-project-channel-name (any string)

5) in your JavaScript code: console.re.log('remote log test'); or console.log('remote log test'); if redirectDefaultConsoleToRemote is true.

6) open remote logger in a separate browser at: http://console.re/your-project-channel-name

7) 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:

const consolere = require('console-remote-client').connect({server: 'https://console.re', channel: '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');

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

6) 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'

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-client module using npm:

$ npm update console-remote-client@2

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

$ npm update console-remote-client@2 -g

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.

const str = 'Test';
const 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

Run on RunJS or jsFiddle

Remote logging {Object} and its content.

const 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
}

Run on RunJS or jsFiddle

Remote logging [Array] and its content.

const 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"
]

Run on RunJS or jsFiddle

Remote console has full ES6 support of next JavaScript.

// One line arrow function
const multiply = (x, y) => x * y;

console.log(multiply(10, 3));

// No Parameters, parentheses are required when no parameters are present.
const sayHello = () => {
  console.log('hello world');
};
sayHello();

// Immediately invoked arrow function expression
(() => console.log('hi'))();

Run on RunJS

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 on here or jsFiddle

Remote logging test results for given expression.

console.re.test(1!==1);

console.re.test("'this string'");

console.re.test([1,2,3,4,5,6]);

console.re.test(document.body);

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

Run on RunJS 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

Run on RunJS or jsFiddle

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

console.re.time('1000000-loops');
console.re.timeEnd('1000000-loops');

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

Run on RunJS or jsFiddle

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

for (let i = 0; i < 10; i++) {
  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

Run on RunJS or jsFiddle

Remote logging size in pixels of DOM elements or Window.

// get Window size
console.re.size();
// get size of document.body
console.re.size(document.body); 

// Remote Logger Output
[SIZE] Window Size: 1274px by 683px‌
[SIZE] <BODY> auto by auto
            <p class="tryit">
              <a href="https://runjs.co/s/0zSJ@DgDD" target="_new">Run on RunJS</a> or
              <a href="/try#example9">Try it here</a> or <a href="http://jsfiddle.net/2v5z4/" target="_new">jsFiddle</a>
            </p>

            <p>Remote logging CSS properties for specified DOM elements.</p>
            <pre class="code cm-s-default nowrap"><textarea class="rawcode">
// 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.

Run on RunJS or 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.

// 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"
]

Run on RunJS 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');

Run on RunJS 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'

Run on RunJS or jsFiddle

Run more JavaScript examples on RunJS.co

Private Servers

For moderate use, you can connect and see your logging information on our public server at http://console.re. 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 a private and more secure solution, you can download and install your own, private console remote personal server https://github.com/kurdin/console-remote-server for FREE.

Just install server and use standard connector https://github.com/kurdin/console-remote with option server to connector with your private server

All information sent to the private server will be more secured and no one can see it.

CONTACT US

Feel free to contact us with any questions, feedback, bug reporting.

FACEBOOK

GITHUB

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

What's New

Console API has new methods.

Console connector has a new options:

Console API shortcuts:

relog() shortcut for console.re.log()

re.[api]() shortcut for console.re.[api]()

console.re.[api] shortcuts

Supported Platforms

Desktop browsers:

Mobile browsers:

Servers:

Features

Install with single <script> tag

Install with import (recommended)

Installation for Node.Js

Command Line (CLI)

Update Node.Js and CLI client

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