将控制台添加到堆栈片段

#1 楼

 console.log("virtual!");
console.log("console!"); 

 <b>Here's some HTML</b> 

#2 楼

 <!-- console visualization; see http://meta.stackexchange.com/a/242491 -->
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
 

 // sample values
var values = [1e100, "a", true, new Date(), x => 1, /(?:)/ig, undefined, null];

// add a circular reference
values.push(values);

// log whole array with circular reference
console.log("array with circular reference: %o", values);

// log each value individually
values.forEach((v, i) => console.log("%i: %o", i, v));

// sample click handler
document.querySelector("button").addEventListener("click", function(e) {
  console.log("clicked: %o", this);
});

// throw a test error
throw new Error("test!"); 

 <!-- console visualization; see http://meta.stackexchange.com/a/242491 -->
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<button>click me</button> 

#3 楼

  function display(msg) {
     document.body.insertAdjacentHTML(
         "beforeend",
         "<p>" + msg + "</p>"
     );
 }
 

 // MIT license, see: https://github.com/tjcrowder/simple-snippets-console/blob/master/LICENSE
var snippet = {
    version: "1.3",

    // Writes out the given text in a monospaced paragraph tag, escaping
    // & and < so they aren't rendered as HTML.
    log: function(msg, tag) {
        var elm = document.createElement(tag || "p");
        elm.style.fontFamily = "monospace";
        elm.style.margin = "2px 0 2px 0";
        if (Object.prototype.toString.call(msg) === "[object Array]") {
            msg = msg.join();
        } else if (typeof msg === "object") {
            msg = msg === null ? "null" : JSON.stringify(msg);
        }
        elm.appendChild(document.createTextNode(msg));
        document.body.appendChild(elm);
    },

    // Writes out the given HTML at the end of the body,
    // exactly as-is
    logHTML: function(html) {
        document.body.insertAdjacentHTML("beforeend", html);
    }
};
 

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

 var a = [10, 0, -5, 7, 12, -3, -1];
var filtered = a.filter(function(entry) {
  return entry >= 0;
});
snippet.log("original: " + a.join(", "));        // "10, 0, -5, 7, 12, -3, -1"
snippet.log("filtered: " + filtered.join(", ")); // "10, 0, 7, 12" 

 var a = [10, 0, -5, 7, 12, -3, -1];
var filtered = a.filter(function(entry) {
  return entry >= 0;
});
display("original: " + a.join(", "));        // "10, 0, -5, 7, 12, -3, -1"
display("filtered: " + filtered.join(", ")); // "10, 0, 7, 12"

function display(msg) {
    document.body.insertAdjacentHTML(
        "beforeend",
        "<p>" + msg + "</p>"
    );
} 

#4 楼

#5 楼

#6 楼

 //starts the console and tells to use the specific element to add the messages there

console._RELAY_TO_DOC = document.getElementById('messages');

//misc stuff, only _USE_JSON has the default value

console._USE_JSON = false;
console._SHOW_COOL_NUMBERS = true;
console._SHOW_TYPES = true;
console._SHOW_STRING_LENGTH = true;

//just use the console now:

console.time('test');

console.log(1,[],{},'string',[1,2,3,4,5],{a:1,b:2,c:3});
console.warn('Too much awesomeness!');
console.info('You are informed.');
console.error('Oh no! We divided by 0!');

console.timeEnd('test');

throw new Error('This will show in the console'); 

 * {font-family:sans-serif;}

html,document {overflow:hidden;}

#console{
  position:absolute;
  top:0px;
  right:-300px;
  -webkit-transition: right 1s;
  transition: right 1s;
  height:100%;
  max-height:100%;
}
#show {display:none;}
#show:checked+#console{right:0px;}
#show_button{
  display:inline-block;
  width:20px;
  height:40px;
  text-align:center;
  border:1px solid #ccc;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  background:white;
  cursor:pointer;
  float:left;
  padding-top:20px;
}
#messages {
  width:300px;
  float:right;
  min-height:100%;
  max-height:100%;
  height:100%;
  background:white;
  overflow-y:scroll;
  border-left:1px solid #ccc;
}

textarea {width:350px; height:130px;} 

 <!-- load the script -->
<script src="http://ismael-miguel.github.io/console-log-to-document/files/console.log.min.js"></script>


<span> All the messages are present there --> </span>
<input type="checkbox" id="show" />
<div id="console">
  <label id="show_button" for="show" checked="checked"> &#9654; </label>
  <div id="messages"><span>List of all messages:</span></div>
</div>

<div>
  Eval you code here: (write and click outside)<br>
  
  <textarea onchange="Function(this.value)();">console.time('test');

console.log(1,[],{},'string',[1,2,3,4,5],{a:1,b:2,c:3});
console.warn('Too much awesomeness!');
console.info('You are informed.');
console.error('Oh no! We divided by 0!');

console.timeEnd('test');

throw new Error('This will show in the console');</textarea>
</div>