https://github.com/markknol/console-log-viewer
Displays logs and Javascript errors in an overlay on top of your site. Useful for mobile webdevelopment. Enabled in 5 seconds
https://github.com/markknol/console-log-viewer
console console-log debugging html5 javascript javascript-errors
Last synced: 8 months ago
JSON representation
Displays logs and Javascript errors in an overlay on top of your site. Useful for mobile webdevelopment. Enabled in 5 seconds
- Host: GitHub
- URL: https://github.com/markknol/console-log-viewer
- Owner: markknol
- Created: 2014-01-02T20:38:20.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2021-03-03T10:34:21.000Z (about 5 years ago)
- Last Synced: 2025-04-11T19:53:15.570Z (11 months ago)
- Topics: console, console-log, debugging, html5, javascript, javascript-errors
- Homepage:
- Size: 78.1 KB
- Stars: 126
- Watchers: 8
- Forks: 9
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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 `` before other `` tags is probably the best place.
```html
<script src="https://markknol.github.io/console-log-viewer/console-log-viewer.js">
```
## 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:
```html
```
#### Pause
* Pause/resume the console logs by pressing the ► button
* Start minimized using:
```html
```
#### Minimize
* Minimize the console with the **-** button, and bring back to normal with the **+** button.
* Start minimized using:
```html
```
#### Alignment
* Switch top/bottom alignment by pressing the **↑** or **↓** button in the console.
* Start bottom aligned using:
```html
```
#### 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](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](https://github.com/markknol/console-log-viewer/issues)_
_[3] .. protip: blame someone else_