Last active
June 14, 2022 16:31
-
-
Save superlinkx/5578803 to your computer and use it in GitHub Desktop.
Simple debugging console for JavaScript that you can embed in your debugging html. Use html.log(<message>) in your javascript to output to this console. The style can be modified easily to your liking.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| #console { | |
| width: 800px; | |
| height: 400px; | |
| background: #575757; | |
| color: white; | |
| margin: 30px auto; | |
| padding: 10px; | |
| overflow: auto; | |
| } | |
| </style> | |
| <script> | |
| $(function(){ | |
| html = { | |
| panel: $("#console"), | |
| log: function(m) { | |
| this.panel.append("<div>> "+m+"</div>"); | |
| } | |
| }; | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="console"></div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| #console { | |
| width: 800px; | |
| height: 400px; | |
| background: #575757; | |
| color: white; | |
| margin: 30px auto; | |
| padding: 10px; | |
| overflow: auto; | |
| } | |
| </style> | |
| <script> | |
| document.addEventListener("DOMContentLoaded", function(){ | |
| html = { | |
| panel: document.querySelector("#console"), | |
| log: function(m) { | |
| var newline = document.createElement("div"); | |
| newline.innerHTML = "> " + m; | |
| this.panel.appendChild(newline); | |
| } | |
| }; | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="console"></div> | |
| </body> | |
| </html> |
Got rid of deprecated window.onload syntax thanks to rlifshay. Also changed > to html entity for proper syntax.
Added overflow: auto. Realized that it wouldn't scroll before, so this should fix it, though it's a bit ugly. I might make a simple css scrollbar later to make it look nicer.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The jQuery and non-jQuery versions are similar to use. I have the non-jQuery version for those who aren't using jQuery or don't want any extra libraries in their code.