CONSOLE REMOTE VER. 2 RELEASED WITH PRIVATE SERVER SUPPORT

Console Remote Server is available here: https://github.com/kurdin/console-remote-server

Try all Console Remote examples at RunJS.co https://runjs.co/s/g7LRa7LU1

Remote JavaScript Console.Re connector script for advanced logging, debugging and testing

Send log, debug or test information from any webpage, web mobile app or node.js server to remote logger. View output results on any device: tablet, phone or desktop in a separate browser window at http://console.re/project-channel-name.

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.type(); console.re.assert(); console.re.time(); 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();

Remote JavaScript Console simplifies front-end (in browsers) and backend (in node.js) web development and testing. No plugins, no browser extensions required, pure JavaScript.

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

_Note:_ This is a client script, not a server. With this code, you can connect and send messages to any project-channel-name you want on our public http://console.re server, you can see your logs at http://console.re/project-channel-name. If you need your own private server please look at this: https://github.com/kurdin/console-remote-server

_Warning:_ Use Console.Re for development and testing environments only. IT WONT WORK ON PRODUCTION WEBSITES AND SERVERS.

What's New in Version 2

$3

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

$3

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 url, to connect and output remote logs to your own, remote console server, default is http://console.re

$3

#### 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

Installation and Use

Node.Js

1. Install module using npm as follows:

``
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', // optional, default: https://console.re
channel: 'YOUR-CHANNEL-NAME' // required
});
`

in case your server supports import, use

`
import consolere from 'console-remote-client'

consolere.connect({
server: 'https://console.re', // optional, default: 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 remote logger in a separate browser: http://console.re/your-project-channel-name

6. restart your app.js, and you should see in logger the following: [log] remote log test

Browser

#### 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
});
`

or use can use require

`
const consolere = require('console-remote-client').connect({
server: 'https://console.re', // optional, default: https://console.re
channel: 'YOUR-CHANNEL-NAME' // required
});
`

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.

#### Install with single
`

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

3. add in your JavaScript code: console.re.log('remote log test');

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

5. reload your webpage or app, you should see in logger the following: [log] remote log test

Below is an example how to include connector.js in :

`html



src="//console.re/connector.js"
data-server="https://console.re"
data-options="redirectDefaultConsoleToRemote[optional], disableDefaultConsoleOutput[optional]"
data-channel="my-website-channel"
id="consolerescript"
>




...

`

#### Install with inline javascript code. (in case you don't have access to head)

1. include this code JavaScript BEFORE your code :

`javascript
var consolere = {
channel: 'YOUR-CHANNEL-NAME',
api: '//console.re/connector.js',
server: 'https://console.re' // optional
options='redirectDefaultConsoleToRemote,disableDefaultConsoleOutput' // optional
ready: function (c) {
var d = document,
s = d.createElement('script'),
l
s.src = this.api
s.id = 'consolerescript'
s.setAttribute('data-channel', this.channel)
if (this.options) {
s.setAttribute('data-options', this.options)
}
if (this.server) {
s.setAttribute('data-server', this.server)
}
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:

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

4. open logger in a separate browser: http://console.re/your-project-channel-name

5. reload your webpage or app, you should see in logger the following: [log] remote log test

API

$3

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

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

Interpolation allows to insert the value of next argument inside previous string with %s or %d. See usage examples.

$3

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

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

$3

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

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

$3

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

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

$3

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

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

$3

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. _This is browser only API_.

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

$3

Displays value of specified CSS properties in array for given selector(s). Use any jQuery selectors if jQuery library included in project. _This is browser only API_.

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

$3

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. _This is browser only API_.

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

Displays all types of Media Queries for current Window size included screen and print. _This is browser only API_.

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

$3

Creates a new performance timer under the given label, it returns the relative distance between two time points, measured in milliseconds

#### console.re.now(label);

$3

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

$3

Stops timer and displays time result started before with given label.

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

$3

Displays the type of a variable or property

#### console.re.type(expression|string|array|object|number);

$3

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

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

$3

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

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

Use quotes to wrap logic and display original expression string along with the results. See usage examples.

$3

Tests if a given expression is true. Only if false, it will display an error message. #####console.re.assert(expression, object?, message?);

$3

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

#### console.re.trace();

$3

Clears remote console logs.

#### console.re.clear();

$3

Mark current log position in console with optional label.

#### console.re.mark(label?);

Usage Examples

###### Logging String or Number value with interpolation. Try it on jsFiddle

`javascript
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
`

###### Logging {Object} and its content. Try it on jsFiddle

`javascript
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
}
`

###### Logging [Array] and its content. Try it on jsFiddle

`javascript
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"
]
`

###### Logging DOM elements and its HTML content with JavaScript or jQuery selectors. Try it on jsFiddle

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

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

// Remote Logger Output
[log] This is an ,Paragraphs [Array Elements]
// clicking on opens its HTML content
`

`HTML



##### In general, instead of log, you can use info,debug,error, or warn to ouput results with different log levels.

###### Logging test results for given expression. Try it on jsFiddle

`javascript
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 ‌
`

###### Logging message if a given expression is not true. Try it on jsFiddle

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

// Remote Logger Output
[assert] It is not true
`

###### Logging time passed between timer start and end calls with the same label. Try it on jsFiddle

`javascript
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‌
`

###### Logging number of times counter called with the same label. Try it on jsFiddle

`javascript
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
`

###### Logging size in pixels of DOM elements or Window. Try it on jsFiddle

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

`javascript
// 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]