Breaking News: Grepper is joining You.com. Read the official announcement!

display console log in HTML

Add Answer

Defiant Dog answered on August 18, 2020 Popularity 10/10 Helpfulness 4/10

answer display console log in HTML

related console.log in html

related console log html element

related console log on html

display console log in HTML

Comment

(function () {
    var old = console.log;
    var logger = document.getElementById('log');
    console.log = function (message) {
        if (typeof message == 'object') {
            logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';
        } else {
            logger.innerHTML += message + '<br />';
        }
    }
})();

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: console display html javascript

Link to this answer
Share Copy Link

Contributed on Aug 18 2020

Defiant Dog

0 Answers Avg Quality 2/10

Closely Related Answers

console.log in html

Comment

<!DOCTYPE html>
<html>
<head>
  <title>Console Log in HTML</title>
  <script>
    // Save the original console.log function
    const originalConsoleLog = console.log;

    // Override console.log to capture logs
    console.log = function(message) {
      // Create a new paragraph to display the log
      const logElement = document.createElement("p");
      logElement.textContent = message;
      
      // Append the log element to a specific div or the body
      const outputDiv = document.getElementById("logOutput");
      outputDiv.appendChild(logElement);
      
      // Call the original console.log function
      originalConsoleLog.apply(console, arguments);
    };
  </script>
</head>
<body>
  <!-- The log output will be appended to this div -->
  <div id="logOutput"></div>

  <!-- Scripts that perform some console log statements -->
  <script>
    console.log("Hello, world!");

    const x = 42;
    console.log("The value of x is:", x);
  </script>
</body>
</html>

Popularity 6/10 Helpfulness 4/10 Language html

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

console log html element

Comment

// DevTools: to console log as <div> element, not as ▶ div#myDiv object
const divEl = document.querySelector('#myDiv');

onload = (e) => console.log(divEl);  // <div id="myDiv"></div>   

// use 'onload' event handler property to wait for page to load then
// console log, allowing the blink engine to find the 'nodeId', otherwise
// its unpredictable and my print randomly one or the other

console.log(divEl)
// <div id="myDiv"></div>   
// ▶ div#myDiv              ->  didnt find nodeId, so prints object

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: console element

Link to this answer
Share Copy Link

Contributed on Mar 12 2023

Coffee Addict

0 Answers Avg Quality 2/10

console log on html

Comment

(function (logger) {
    console.old = console.log;
    console.log = function () {
        var output = "", arg, i;

        for (i = 0; i < arguments.length; i++) {
            arg = arguments[i];
            output += "<span class=\"log-" + (typeof arg) + "\">";

            if (
                typeof arg === "object" &&
                typeof JSON === "object" &&
                typeof JSON.stringify === "function"
            ) {
                output += JSON.stringify(arg);   
            } else {
                output += arg;   
            }

            output += "</span>&nbsp;";
        }

        logger.innerHTML += output + "<br>";
        console.old.apply(undefined, arguments);
    };
})(document.getElementById("logger"));

// Testing
console.log("Hi!", {a:3, b:6}, 42, true);
console.log("Multiple", "arguments", "here");
console.log(null, undefined);
console.old("Eyy, that's the old and boring one.");

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: console

Link to this answer
Share Copy Link

Contributed on Jul 28 2022

Tiago F2

0 Answers Avg Quality 2/10

display console log in HTML

Contents

More Related Answers

display console log in HTML

Closely Related Answers

console.log in html

console log html element

console log on html

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.