javascript - 在实际网页上显示 chrome 控制台内容

Question

我想在 Chrome 控制台上的“Canteen”标签内显示这些结果，但我没有这样做。已尝试使用列表 ID Chrome console .

这是代码:

var database = firebase.database();
var msgRef = firebase.database().ref('survey');

msgRef.on("child_added",function(snapshot) {
  var changedPost = snapshot.val();
  console.log(changedPost)  
});

var ids = 'IDs: ';
$('[show_survey]').each(function () {
    ids += this.id + ' ';
});

$('#results').text(ids);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "survey" style="background:white;float:center;height:70%;width:80%;margin:10%;border-radius:20px;">
  <h1 id="fireHeading" align="center">CANTEEN SURVEY</h1>
  <div id = "contact" style="margin-right:50%;">
    <p>
      <ul id = "show_survey"></ul>
    </p>
  </div>
</div>

Answer 1

您可以覆盖 console.log() 的默认实现

基本上，您所做的是覆盖 console.log() 的默认实现。

代码解释:您在 if 条件下检查脚本中的控制台日志，如果是，则检索日志并将其放入旧变量。然后声明另一个名为 logger 的变量并将其链接到名为 log 的 HTML div 标记。此外，它将检查消息是一个对象。如果它是一个对象，它将进行字符串化(将 JSON 对象转换为字符串)并将值返回给记录器变量。否则，如果它不是对象，则意味着它已经是一个字符串。因此在 else 语句中它将消息变量返回给记录器变量。 logger 变量将作为 div 日志发布在 HTML 内容中。

您可以尝试如下所示的函数。

(function () {
    if (!console) {
        console = {};
    }
    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) : String(message)) + '<br />';
        } else {
            logger.innerHTML += message + '<br />';
        }
    }
})();

console.log("ChangePost Value");

<div id="survey" style="background:white;float:center;height:70%;width:80%;margin:10%;border-radius:20px;">
  <h1 id="fireHeading" align="center">CANTEEN SURVEY</h1>
  <div id="contact" style="margin-right:50%;">
    <div id="log"></div>
    <p>
      <ul id="show_survey">
      </ul>
    
  </div>
</div>