On-screen logger

About

On-screen logger lets you see your console logs right on the screen. It can be helpful for the platforms that hard to debug like WebViews inside other apps.

Guide

Just add the script from https://800147.github.io/on-screen-logger/logger.js before any other scripts in your html file (no additional attributes — no type module, no defer, no async).

<script src="https://800147.github.io/on-screen-logger/logger.js"></script>
<script>
  console.log('Here I am at the screen!');
</script>

Supported methods

• console.log
• console.info
• console.debug
• console.warn
• console.error
• console.trace
• console.assert
• console.table^*
• console.clear
• console.count
• console.countReset
• console.time
• console.timeLog^*
• console.timeEnd^*
• console.group
• console.groupCollapsed (same as console.group)
• console.groupEnd

* — the result may differ from the result in the console.

String substitutions are not supported.

Styling

You can override default styles using given classnames.

.OSLogger {
  bottom: 50%;
  font-size: 20px;
  opacity: 0.9;
}

.OSLogger-Message_level_info,
.OSLogger-Message_level_debug {
  display: none;
}

Example

Here is the example page that uses On-screen logger:

Sources

The sources can be found on Github: