This is an onscreen/inpage console/debugger. Using native javascript (ECMAScript 6) it offers all features in one file and absolutely zero dependencies! Great for mobile debugging.
It hooks into the default console
functions, so every console.log()
, console.warn()
, console.error()
and console.debug()
will be written to both, the browsers build-in console and the on-screen-console.
All JavaScript errors, including those in async functions and promises, will also be logged into on-screen-console. The amount and value of error-information depends on the browser and error type.
Unfortunately there is no support for console.trace()
yet.
Just add the script to your HTML file (preferably at the very top of your <script>
-elements)
<script src="https://suppenhuhn79.github.io/on-screen-console/onscreenconsole.js"></script>
and add ?console=n
to the url when calling your page (where n
sets the log level: 1
=debug+log+info+warn+error, 2
=log+info+warn+error, 3
=warn+error, 4
=error only).
https://suppenhuhn79.github.io/on-screen-console/demo.html?console=1
If you want on-screen-console to be responsive to light or dark mode, add the dark-mode stylesheet to your page:
<link rel="stylesheet" href="https://suppenhuhn79.github.io/on-screen-console/dark.css"/>
.ah value
auto hide on-screen-console. value is either 1
(auto hide on) or 0
(auto hide off = console stays fully expanded). Default is 1
.
.c
clear the on-screen-console output.
.fs value
set the font size. value is a number or any valid CSS size specification. Default is 0.8rem
. If no unit is given, rem
is assumed.
.mh value
set the maximum height of the output area (not the entire console box!). value is a number or any valid CSS size specification. Default is 30vh
. If no unit is given, vh
is assumed.
.x
exit the on-screen-console.
.zi number
set the z-index of the on-screen-console. Initially console is the very top most element. Be careful to not set the z-index too low.
Shorthand makes it more handy for mobile devices.
You can customize almost everything on the on-screen-console. Just add a CSS stylesheet to your page. Take a look at the template.css.