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
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.
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
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
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');
instead of using console.re.log('test')
, now you can use a shortcut console.re.l('test')
or re.l('test');
npm install console-remote-client
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',
})
[required] change connect function argument YOUR-CHANNEL-NAME
to your own your-project-channel-name
(any string)
add in your code: console.re.log('remote log test');
open remote logger in a separate browser: http://console.re/your-project-channel-name
restart your app.js, and you should see in logger the following: [log] remote log test
console-remote-client
modulenpm install console-remote-client
import consolere from 'console-remote-client'
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
});
[required] change YOUR-CHANNEL-NAME
in attribute data-channel
to your-project-channel-name
(any string)
in your JavaScript code: console.re.log('remote log test');
or console.log('remote log test');
if redirectDefaultConsoleToRemote
is true.
<script>
tag.connector.js
FIRST thing in <head>
tag or BEFORE any other <script>
tags:<script
src="https://github.com/kurdin/console-remote/raw/main//console.re/connector.js"
data-server="OPTIONAL-PRIVATE-SERVER-URL"
data-channel="YOUR-CHANNEL-NAME"
id="consolerescript"
></script>
[required] change YOUR-CHANNEL-NAME
in attribute data-channel
to your-project-channel-name
(any string)
add in your JavaScript code: console.re.log('remote log test');
open remote logger in a separate browser: http://console.re/your-project-channel-name
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 <head>
:
<!DOCTYPE html>
<html>
<head>
<script
src="https://github.com/kurdin/console-remote/raw/main//console.re/connector.js"
data-server="https://console.re"
data-options="redirectDefaultConsoleToRemote[optional], disableDefaultConsoleOutput[optional]"
data-channel="my-website-channel"
id="consolerescript"
></script>
<script src="https://github.com/kurdin/console-remote/raw/main/js/lib/jquery.js"></script>
<script src="https://github.com/kurdin/console-remote/raw/main/js/your-script1.js"></script>
<script src="https://github.com/kurdin/console-remote/raw/main/js/your-script2.js"></script>
</head>
...
</html>
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)
}
}
[required] change YOUR-CHANNEL-NAME
in key channel
to your-project-channel-name
(any string)
in your JavaScript code, use consolere.ready()
callback to wrap console.re API:
consolere.ready(function () {
console.re.log('remote log test')
})
open logger in a separate browser: http://console.re/your-project-channel-name
reload your webpage or app, you should see in logger the following: [log] remote log test
re.log()
| re.l()
| relog()
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.
re.info()
| re.i()
Sends INFO
level message to remote console with optional arguments same as console.re.log()
.
console.re.info(message);
re.warn()
| re.w()
Sends WARN
level message to remote console with optional arguments same as console.re.log()
.
console.re.warn(message);
re.debug()
| re.d()
Sends DEBUG
level message to remote console with optional arguments same as console.re.log()
.
console.re.debug(message);
re.error()
| re.e()
Sends ERROR
level message to remote console with optional arguments same as console.re.log()
.
console.re.error(message);
re.size()
| re.s()
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,...]);
re.css()
| re.cs()
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']);
re.mq()
| re.mq()
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']);
re.now()
| re.n()
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);
re.time()
| re.ti()
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);
re.timeEnd()
| re.te()
Stops timer and displays time result started before with given label
.
console.re.timeEnd(label);
re.type()
| re.t()
Displays the type of a variable or property
console.re.type(expression|string|array|object|number);
re.count()
| re.c()
Displays the number of times count call with given label
was executed.
console.re.count(label);
re.test()
| re.ts()
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.
re.assert()
| re.a()
Tests if a given expression is true
. Only if false
, it will display an error message
. #####console.re.assert(expression, object?, message?);
re.trace()
| re.t()
Displays stack trace of JavaScript execution at the point where it was called.
console.re.trace();
re.clear()
| re.cl()
Clears remote console logs.
console.re.clear();
re.mark()
| re.m()
Mark current log position in console with optional label.
console.re.mark(label?);
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
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
}
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"
]
Note: using jQuery selectors requires jQuery library to be included in your project.
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>
log
, you can use info
,debug
,error
, or warn
to ouput results with different log levels.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>
console.re.assert(1!==1, 'It is not true');
// Remote Logger Output
[assert] It is not true
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
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
Note: using jQuery selectors requires jQuery library to be included in your project.
// 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.
// 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"
}
]
// 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)
(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"
]
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'
)
[b]bold[/b]
[i]italic[/i]
[u]underline[/u]
[s]strike-through[/s]
[size=X]1-20[/size]
[red]
[green]
[blue]
[yellow]
[orange]
[lime]
[white]
[black]
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 more Console.Re API Demos on jsFiddle: http://jsfiddle.net/jQYs5/
%s
and %d
Enjoy faster web development process!
Console.Re Connector API (client) works on Desktop, Mobile and Server:
Internet Explorer 6+
Safari 3+
Google Chrome 4+
Firefox 3+
Opera 10+
iPhone Safari
iPad Safari
Android WebKit
WebOs WebKit
Node.js
Shell via Command Line Interface
Install it globally with npm as follows:
$ 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 --help
:
$ consolere --help
$ CHANNEL=YOUR-CHANNEL-NAME node tests.js
Change YOUR-CHANNEL-NAME
to project-channel-name
and run tests
console.re.log
-> console.re.l
-> re.l
console.re.warn
-> console.re.w
-> re.w
console.re.info
-> console.re.i
-> re.i
console.re.debug
-> console.re.d
-> re.d
console.re.error
-> console.re.e
-> re.e
console.re.trace
-> console.re.te
-> re.te
console.re.time
-> console.re.ti
-> re.ti
console.re.timeEnd
-> console.re.te
-> re.te
console.re.count
-> console.re.c
-> re.c
console.re.size
-> console.re.s
-> re.s
console.re.assert
-> console.re.a
-> re.a
console.re.type
-> console.re.t
-> re.t
console.re.test
-> console.re.ts
-> re.ts
console.re.css
-> console.re.cs
-> re.cs
console.re.now
-> console.re.n
-> re.n
console.re.media
-> console.re.mq
-> re.mq
console.re.mark
-> console.re.m
-> re.m
console.re.clear
-> console.re.cl
-> re.cl
For moderate use, you can connect and see your logging information on our 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 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
Just install server and use standard connector's 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.
We have TypeScript definitions in file ./index.d.ts
, this should be automaticly located by TypeScript configuration if your project has TypeScript.
In some cases, global console remote variables relog
or re.[method]
are not detected correctly by TypeScript and Eslint can start complaining about.
To fix that problem just add those lines to your local project.d.ts
file:
declare var relog: (...message: any) => void
declare var re: {
[key in any]: (...message: any) => void
}
Copyright (c) 2012 - 2021 Sergey Kurdin https://github.com/kurdin
Check my JavaScript Playground Web App https://runjs.co
Based on http://jsoverson.github.io/rcl Copyright (c) 2012 by Jarrod Overson
The MIT License (MIT)