Displays logs and Javascript errors in an overlay on top of your site. Useful for mobile webdevelopment. Enabled in 5 seconds
Switch branches/tags
Nothing to show
Latest commit 628bf5c Apr 20, 2017 @markknol markknol Update README.md
https links
Permalink
Failed to load latest commit information.
README.md Update README.md Apr 20, 2017

README.md

console-log-viewer.js

.. displays logs and Javascript errors in an overlay on top of your site. Useful for mobile webdevelopment. Installed in 5 seconds [1]. Works on every device and browser [2].

It's useful when you want to see logs and the errors you [3] have created in a mobile browser while you are developing and debugging.

I found debugging is a bit hard on mobile devices since there is no magic button in mobile browser to see the console logs or Javascript errors and related source. There are a lot of remote-tools. Some are not available for all browsers, take time too much time to setup or aren't sync because of remote delays.

How to install (in 5 seconds)?

Add this piece of code somewhere in your html-page. Save document, refresh browser.
In the <head> before other <script> tags is probably the best place.

<script src="https://markknol.github.io/console-log-viewer/console-log-viewer.js"></script>

console log viewer

What does it do?

It captures console.log, console.info, console.warn, console.debug, console.error and window.onerror and displays it in an overlay on top of your site. That's it.

Features

Close / Open console

  • Closes the console with the x button, and bring back with the Ξ button.
  • Tip: Toggle the console with the keyboard ~ tilde key.
  • Start closed using:
<script src="https://markknol.github.io/console-log-viewer/console-log-viewer.js?closed=true"></script>

Pause

  • Pause/resume the console logs by pressing the ► button
  • Start minimized using:
<script src="https://markknol.github.io/console-log-viewer/console-log-viewer.js?log_enabled=false"></script>

Minimize

  • Minimize the console with the - button, and bring back to normal with the + button.
  • Start minimized using:
<script src="https://markknol.github.io/console-log-viewer/console-log-viewer.js?minimized=true"></script>

Alignment

  • Switch top/bottom alignment by pressing the or button in the console.
  • Start bottom aligned using:
<script src="https://markknol.github.io/console-log-viewer/console-log-viewer.js?align=bottom"></script>

Displaying errors

Clicking on a Javascript-error opens the source in a new tab (demo).

Source

The source can be found here: https://github.com/markknol/console-log-viewer/blob/gh-pages/console-log-viewer.js

Disclaimers

[1] .. depends on your copy/paste skills
[2] .. if this isn't true report here
[3] .. protip: blame someone else