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
Stars: ✭ 103
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Console Log Viewer
Frontendwingman
Frontend Wingman, Learn frontend faster!
Stars: ✭ 315 (+205.83%)
Mutual labels: console, html5
Simple Console
Add an elegant command-line interface to any page
Stars: ✭ 107 (+3.88%)
Mutual labels: console, html5
Openpanzer
Javascript/HTML5 rewrite of Panzer General 2 game
Stars: ✭ 98 (-4.85%)
Mutual labels: html5
Cargo Embed
a cargo extension for working with microcontrollers
Stars: ✭ 100 (-2.91%)
Mutual labels: debugging
Tooling
Advancing Node.js as a framework for writing great tools
Stars: ✭ 98 (-4.85%)
Mutual labels: console
Sillynium
Automate the creation of Python Selenium Scripts by drawing coloured boxes on webpage elements
Stars: ✭ 100 (-2.91%)
Mutual labels: html5
Birdseye
Graphical Python debugger which lets you easily view the values of all evaluated expressions
Stars: ✭ 1,373 (+1233.01%)
Mutual labels: debugging
Hls.js
HLS.js is a JavaScript library that plays HLS in browsers with support for MSE.
Stars: ✭ 10,791 (+10376.7%)
Mutual labels: html5
Nodeppt
This is probably the best web presentation tool so far!
Stars: ✭ 9,589 (+9209.71%)
Mutual labels: html5
Micro Racing
🚗 🏎️ 🎮 online 3D multiplayer neural networks based racing game
Stars: ✭ 100 (-2.91%)
Mutual labels: html5
React 3d Viewer
A 3D model viewer component based on react.js 一个基于react.js的组件化3d模型查看工具
Stars: ✭ 100 (-2.91%)
Mutual labels: html5
Dte
A small, configurable console text editor (moved to https://gitlab.com/craigbarnes/dte)
Stars: ✭ 98 (-4.85%)
Mutual labels: console
Debug
A tiny JavaScript debugging utility modelled after Node.js core's debugging technique. Works in Node.js and web browsers
Stars: ✭ 9,912 (+9523.3%)
Mutual labels: debugging
Scala Debugger
Scala libraries and tooling utilizing the Java Debugger Interface.
Stars: ✭ 100 (-2.91%)
Mutual labels: debugging
Webpack Format Messages
Beautiful formatting for Webpack messages; ported from Create React App!
Stars: ✭ 103 (+0%)
Mutual labels: console
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>
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].