Skip to content

Extends JavaScript's console to display a visual (HTML) console inside the webpage. Very usefull for debugging JS on mobile devices with no visible console (like iOS' Safari). Demo at: https://code.hnldesign.nl/demo/hnl.MobileConsole.v2.html

License

Notifications You must be signed in to change notification settings

c-kick/mobileConsole

Repository files navigation

mobileConsole

mobileConsolev2 is a further refinement (complete rewrite) of a JavaScript console-emulator I wrote, which provides a way to view console output on devices that don't support this (visually) natively/easily (such as Safari on iOS). It extends JavaScript's native console to display a visual (HTML) console inside the webpage.

About

mobileConsole reroutes the native window.console output and renders it to HTML. This means that you can include mobileConsole in any project, without having to rewrite any existing logging; mobileConsole 'hijacks' all console methods, such as console.log, console.warn, etc. It also outputs global window.onerror errors and sports a command line input. Oh, and it even has dark color scheme support!

See it in action at https://code.hnldesign.nl/demo/hnl.MobileConsole.v2.html. You can freely resize the console by (touchmove/click-)dragging the top bar, or tap/click it once to minimize/restore the console. Clear the console by using the recycle-bin icon.

Usage

Include the JavaScript file into the <head> section of your page, and make sure it's the first script loaded (or at least before other scripts of which you need to be able to see console logging). A separate CSS is required for proper styling/theming/positioning of the console. This file is loaded through JavaScript, so you only need to include the js file in your project. Just make sure the CSS file resides in the same path as the JavaScript file.

Via CDN (jsDelivr)

You can include https://cdn.jsdelivr.net/gh/c-kick/mobileConsole/hnl.mobileconsole.min.js, which always gets you the latest version. The required CSS is loaded automatically (from the jsDelivr CDN) by the script.

Example: <script src="https://cdn.jsdelivr.net/gh/c-kick/mobileConsole/hnl.mobileconsole.min.js"></script>

Acknowledgements

mobileConsolev2 uses stacktracejs (bundled) for resolving stack traces across all browsers.

About

Extends JavaScript's console to display a visual (HTML) console inside the webpage. Very usefull for debugging JS on mobile devices with no visible console (like iOS' Safari). Demo at: https://code.hnldesign.nl/demo/hnl.MobileConsole.v2.html

Resources

License

Stars

Watchers

Forks

Packages

No packages published