Skip to content

Instantly share code, notes, and snippets.

@waynegraham

waynegraham/console.js

Last active July 7, 2025 09:23
Show Gist options
  • Save waynegraham/5766565 to your computer and use it in GitHub Desktop.
Save waynegraham/5766565 to your computer and use it in GitHub Desktop.
Download ZIP
print console.log output to a debug div (for mobile)
Raw
console.js
if (typeof console != "undefined")
if (typeof console.log != 'undefined')
console.olog = console.log;
else
console.olog = function() {};
console.log = function(message) {
console.olog(message);
$('#debugDiv').append('<p>' + message + '</p>');
};
console.error = console.debug = console.info = console.log
Raw
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
#debugDiv {height: 200px; width: 500px; border: 1px solid #333; overflow:scroll;}
</style>
<script src="console.js"></script>
</head>
<body>
<div id="debugDiv"></div>
<script>
console.log('test');
</script>
</body>
@tomachinz
Copy link

Nice work!

@DivekJohns
Copy link

DivekJohns commented Sep 13, 2020 •
edited
Loading

How to print with styles like color, font etc..
Example : �[32m[Nest] 32612 - �[39m09/13/2020, 1:36:17 PM �[33m[RoutesResolver] �[39m�[32mControlsController {/BackendApp/api/controls}:�[39m�[33m +1ms�[39m

@mlsomers
Copy link

mlsomers commented Jul 7, 2025

added some color for error, debug and info:

if (typeof console  != "undefined"){
  if (typeof console.log != 'undefined')
    console.olog = console.log;
  else
    console.olog = function() {};

  if (typeof console.debug != 'undefined')
    console.odebug = console.debug;
  else
    console.odebug = function() {};

  if (typeof console.info != 'undefined')
    console.oinfo = console.info;
  else
    console.oinfo = function() {};

  if (typeof console.error != 'undefined')
    console.oerror = console.error;
  else
    console.oerror = function() {};
}

console.log = function(message) {
  $('#debugDiv').append('<p>' + message + '</p>');
  console.olog(message);
};

console.debug = function(message) {
  $('#debugDiv').append('<p style="color:#777">' + message + '</p>');
  console.odebug(message);
};

console.info = function(message) {
  $('#debugDiv').append('<p style="color:#050">' + message + '</p>');
  console.oinfo(message);
};

console.error = function(message) {
  $('#debugDiv').append('<p style="color:#500">' + message + '</p>');
  console.oerror(message);
};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment