Javascript console log to html

Question

I would like to write the console log output to a div layer   For example   document write console log 5 1      Incorrect  random example   Can someone give me a solution to my problem   Thank you   EDIT   what i meant is  for example   console log  hi      and it shows the output  hi  on the screen   Note  An example  http   labs codecademy com   workspace

User · Answer

This post has helped me a lot  and after a few iterations  this is what we use  The idea is to post log messages and errors to HTML  for example if you need to debug JS and don t have access to the console  You do need to change  console log  with  logThis   as it is not recommended to change native functionality  What you ll get   A plain and simple  logThis  function that will display strings and objects along with current date and time for each line A dedicated window on top of everything else   show it only when needed  Can be used inside   catch  to see relevant errors from promises  No change of default console log behavior Messages will appear in the console as well    x000D   x000D  function logThis message         if we pass an Error object  message stack will have all the details  otherwise give us a string   if  typeof message      object         message   message stack    objToString message          console log message         create the message line with current time   var today   new Date      var date   today getFullYear      -     today getMonth     1     -    today getDate      var time   today getHours           today getMinutes           today getSeconds      var dateTime   date         time             insert line   document getElementById  logger   insertAdjacentHTML  afterbegin   dateTime   message     lt br gt        function objToString obj      var str    Object       for  var p in obj        if  obj hasOwnProperty p           str    p          obj p       n               return str     const object1       a   somestring     b  42    c  false     logThis object1  logThis  And all the roads we have to walk are winding  And all the lights that lead us there are blinding   x000D   logWindow     overflow  auto    position  absolute    width  90     height  90     top  5     left  5     right  5     bottom  5     background-color  rgba 0  0  0  0 5     z-index  20    x000D   lt div id  logWindow  gt     lt pre id  logger  gt  lt  pre gt   lt  div gt  x000D   x000D   x000D   Thanks this answer too  JSON stringify   didn t work for this

User · Answer

Slight improvement on  arun-p-johny answer   In html    lt pre id  log  gt  lt  pre gt    In js    function          var old   console log      var logger   document getElementById  log        console log   function            for  var i   0  i  lt  arguments length  i              if  typeof arguments i      object                 logger innerHTML     JSON  amp  amp  JSON stringify   JSON stringify arguments i   undefined  2    arguments i       lt br   gt              else               logger innerHTML    arguments i      lt br   gt                                    Start using   console log  How   true  new Date

User · Answer

Create an ouput   lt div id  output  gt  lt  div gt    Write to it using JavaScript  var output   document getElementById  output    output innerHTML    hello world     If you would like it to handle more complex output values  you can use JSON stringify  var myObj    foo   bar    output innerHTML   JSON stringify myObj

User · Answer

I come a bit late with a more advanced version of Arun P Johny s answer  His solution doesn t handle multiple console log   arguments and doesn t give an access to the original function   Here s my version    x000D   x000D   function  logger    x000D      console old   console log  x000D      console log   function      x000D          var output       arg  i  x000D   x000D          for  i   0  i  lt  arguments length  i      x000D              arg   arguments i   x000D              output      lt span class   log-     typeof arg        gt    x000D   x000D              if   x000D                  typeof arg      object   amp  amp  x000D                  typeof JSON      object   amp  amp  x000D                  typeof JSON stringify      function  x000D                  x000D                  output    JSON stringify arg      x000D                else   x000D                  output    arg     x000D                x000D   x000D              output      lt  span gt  amp nbsp    x000D            x000D   x000D          logger innerHTML    output     lt br gt    x000D          console old apply undefined  arguments   x000D         x000D     document getElementById  logger     x000D   x000D     Testing x000D  console log  Hi     a 3  b 6   42  true   x000D  console log  Multiple    arguments    here    x000D  console log null  undefined   x000D  console old  Eyy  that s the old and boring one     x000D  body  background   333   x000D   log-boolean  x000D   log-undefined  color  magenta   x000D   log-object  x000D   log-string  color  orange   x000D   log-number  color  cyan   x000D   lt pre id  logger  gt  lt  pre gt  x000D   x000D   x000D    I took it a tiny bit further and added a class to each log so you can color it  It outputs all arguments as seen in the Chrome console  You also have access to the old log via console old     Here s a minified version of the script above to paste inline  just for you    lt script gt       function o  console old console log console log function   var n e t    for e 0 e lt arguments length e   t    lt span class  log-  typeof n arguments e      gt    object   typeof n amp  amp  object   typeof JSON amp  amp  function   typeof JSON stringify t  JSON stringify n  t  n t    lt  span gt  amp nbsp   o innerHTML  t   lt br gt   console old apply void 0 arguments         document body    lt  script gt    Replace document body in the parentheses with whatever element you wish to log into

User · Answer

You can override the default implementation of console log     function          var old   console log      var logger   document getElementById  log        console log   function  message            if  typeof message     object                 logger innerHTML     JSON  amp  amp  JSON stringify   JSON stringify message    message      lt br   gt              else               logger innerHTML    message     lt br   gt                            Demo  Fiddle

User · Answer

A little late to the party  but I took  Hristiyan Dodov s answer a bit further still    All console methods are now rewired and in case of overflowing text  an optional autoscroll to bottom is included  Colors are now based on the logging method rather than the arguments    x000D   x000D  rewireLoggingToElement  x000D           gt  document getElementById  log    x000D           gt  document getElementById  log-container    true   x000D   x000D  function rewireLoggingToElement eleLocator  eleOverflowLocator  autoScroll    x000D      fixLoggingFunc  log    x000D      fixLoggingFunc  debug    x000D      fixLoggingFunc  warn    x000D      fixLoggingFunc  error    x000D      fixLoggingFunc  info    x000D   x000D      function fixLoggingFunc name    x000D          console  old    name    console name   x000D          console name    function    arguments    x000D              const output   produceOutput name  arguments   x000D              const eleLog   eleLocator    x000D   x000D              if  autoScroll    x000D                  const eleContainerLog   eleOverflowLocator    x000D                  const isScrolledToBottom   eleContainerLog scrollHeight - eleContainerLog clientHeight  lt   eleContainerLog scrollTop   1  x000D                  eleLog innerHTML    output     lt br gt    x000D                  if  isScrolledToBottom    x000D                      eleContainerLog scrollTop   eleContainerLog scrollHeight - eleContainerLog clientHeight  x000D                    x000D                else   x000D                  eleLog innerHTML    output     lt br gt    x000D                x000D   x000D              console  old    name  apply undefined  arguments   x000D             x000D        x000D   x000D      function produceOutput name  args    x000D          return args reduce  output  arg    gt    x000D              return output   x000D                    lt span class   log-     typeof arg      log-    name       gt     x000D                       typeof arg      object   amp  amp   JSON        stringify   JSON stringify arg    arg    x000D                    lt  span gt  amp nbsp    x000D                  x000D        x000D    x000D   x000D   x000D  setInterval      gt    x000D    const method      log    debug    warn    error    info   Math floor Math random     5     x000D    console method  method   logging something       x000D     200   x000D   log-container   overflow  auto  height  150px    x000D   x000D   log-warn   color  orange   x000D   log-error   color  red   x000D   log-info   color  skyblue   x000D   log-log   color  silver   x000D   x000D   log-warn   log-error   font-weight  bold    x000D   lt div id  log-container  gt  x000D     lt pre id  log  gt  lt  pre gt  x000D   lt  div gt  x000D   x000D   x000D

[javascript] Javascript: console.log to html

Examples related to javascript