What is this?
A tool for programmers to see a viewable console in the browser. Meant to be used on mobile devices and/or browsers that do not support the console object. The script uses device detection (user agent sniffing) and if the
console object is
undefined; It then overwrites the
console object. This is a bare bones console, not a replacement for the browsers console. Certain limitations and functionality that the browser's console has will not be implemented in order to keep the script file size down.
- Toggle console
- Adjust console height / Clear console
- Query params (height/toggle/override)
- Recognizable theme / Syntax highlighting
- Show timestamp toggle
- Supported functions:
error(does not include trace functionality)
- Nested objects (window, document)
- Autocomplete commands
- String substitution and formatting, Format specifiers
- Styling console output
- Filtering, Settings, Command Line API
- Monitoring events
- Have an issue? Log it here!
Just add the script on the page before the js file(s) that contain
console and you're good to go! No rewriting code!
You may also use parameters to set default settings for the console (visibility and height). Simply add '?' to the end of the src attribute on the script tag. You can also use the override setting, which overrides the device detection and if the
console is undefined or not.
By default it will be expanded/visible. You can hide the console by clicking on the top bar that says "Click to hide". You can override this default setting by adding a query parameter to the script tag:
By default the console height (height of the log entries specifically) will be 1/3 of the window height. You can also adjust the height of the console by typing into the input field next to "CLEAR". As well as with visibility, you can also set the height of the console through query parameter:
NOTE: Height must be >= 90 and >= to the window height - 150 (magic number). Applies to using the input and query parameter. If the value does not meet the requirement it will be set to the default.
Currently the custom console will only appear if
console is not supported. However you can change that with a query parameter to ensure that it always appears:
<!-- Add console log script above the other script. (with default settings) -->
<!-- Some random js file with console.log -->
Try it out! View the demo
Remember you need to view it on a device or change your user agent.