Popup-console.js: Console debug logging w/HMDs in mind


Here is an approach to console logging that can be customized to work with different Desktop and HMD modes.

It uses a singular overlay web window to display log messages from one or more scripts:

By design there are no necessary dependencies introduced on the logging side – instead, simple messages can be logged from other scripts to the popup using:

Messages.sendLocalMessage('console', 'your debug message here...');

For advanced needs, there is also a fuller console.* API (.info, .warn, .error, etc.) option available via script include.

Getting started

To test, load this Client script – popup-window.js – as a URL from the Running Scripts dialog. Or run the following snippet from the Script Editor:

Client script:


Once loaded, a popup console window should appear with the default settings applied. Then debug messages can be sent to it from other Client scripts, Entity scripts, or Console… commands.

Logging Examples:

Using the stock Messages.* API:

// ...sendLocalMessage(channel, message)
Messages.sendLocalMessage('console', 'your debug message goes here');

// messages in parts need to be concatenated into a single string:
var a = 'foo', b = 'bar';
Messages.sendLocalMessage('console', 'note: ' + a + ' ' + b);

// ... using an Array literal can also work:
Messages.sendLocalMessage('console', [ 'note:', a, b ]); // implicit .join(',') (JS []->String coercion)
Messages.sendLocalMessage('console', [ 'note:', a, b ].join(' ')); // explicit .join(' ')

Using the emulated console.* API

(note that the below Script.include refers to popup-remote.js – not popup-window.js)


console.log('your string message here');
var a = 'foo', b = 'bar';
console.warn('note:', a, b);
console.warn('it supports a subset of the de facto standard console.* API', JSON.stringify(MyAvatar.position));
console.info('current location:', location.href);

Maximizing (or minimizing) legibility

Different Google Fonts, zoom levels and custom CSS styles can be configured as part of the script URL:

Script.include('https://rawgit.com/humbletim/hifi-aux/571bbda/ideas/console/popup-window.js' +
    '?font=Comic Sans MS&zoom=1.5&styles=body{ color: hotpink; }');

The font family is loaded from https://fonts.google.com/ – so generally any font names found on there should “just work.” And if you find a great font/zoom/style combination for your HMD/Desktop setup please mention!

Formatted output

There are some non-standard wrappers that attempt to automatically pretty print / syntax highlight JS Objects:

console.pretty('position', MyAvatar.position);
try {
    throw new Error('test');
} catch(e) {
    console.pretty.error('exception', e);
console.pretty.info('Camera', Camera);

White space

White space is not currently preserved (with .info, .warn, etc.) – for now, where spacing matters, a non-standard console.print method can be used:

console.print('... like built-in print...\n\t...new lines and tabs are preserved.');

Output from the above logging commands:

(ps: that’s using Inconsolata font at Zoom 1.3 – popup-window.js?font=Inconsolata&zoom=1.3)

If anybody tries it out and runs into issues please let me know.

QT Font, Blurry, Terrible readable and small

Just a sidenote , looks like a good color scheme for the script editor. Font looks better to.

Now back to reading.