Làm cách nào để xuất kết quả vào cửa sổ 'kết quả' trong JSFiddle?

Question

Tôi đã thử sử dụng console.log() nhưng tôi cần phải mở cửa sổ nhà phát triển trong chrome để xem đầu ra. Alert() ghi vào hộp bật lên. Tôi muốn xuất ra cửa sổ kết quả (khung dưới cùng bên phải) trong JSFiddle. Bất cứ ai có thể cho tôi biết xin vui lòng?

Cập nhật bằng hình ảnh câu trả lời của JajaDrinker - cảm ơn vì điều này.

Answer 1

Thêm phần này vào phần HTML:

<div id="console-log"></div> 

Thêm phần này vào phần JavaScript:

var consoleLine = "<p class=\"console-line\"></p>"; 

console = { 
    log: function (text) { 
     $("#console-log").append($(consoleLine).html(text)); 
    } 
}; 

Tùy chọn, thêm video này vào CSS để làm cho nó thân thiện với người dùng hơn :

.console-line 
{ 
    font-family: monospace; 
    margin: 2px; 
} 

Bạn có thể xem một số example here.

Answer 2

Đây là giải pháp không phô trương, do đó bạn sẽ không cần sửa đổi HTML của mình. Tôi đã sử dụng thẻ trước nhưng bạn có thể sử dụng bất kỳ thẻ nào bạn muốn.

console = { 
    _createConsole : function() { 
     var pre = document.createElement('pre'); 
     pre.setAttribute('id', 'console'); 
     document.body.insertBefore(pre, document.body.firstChild); 
     return pre; 
    }, 
    log: function (message) { 
     var pre = document.getElementById("console") || console._createConsole(); 
     pre.textContent += ['>', message, '\n'].join(' '); 
    } 
}; 

• mẫu JSFiddle với phong cách CSS.
• Dưới đây là một version có thể được đóng gói dưới dạng mô-đun js bên ngoài cho một dự án lớn hơn.

Answer 3

Tôi đã tạo một bản ngã của phiên bản Pete giữ lại cùng một chức năng kín đáo nhưng, ngoài ra, lưu trữ một bản sao của bảng điều khiển thông thường và ghi vào nó.

(function() { 
    // Store a copy of the old console, but don't junk up the 
    // global namespace with it either. This allows console 
    // logging in both places. 
    var oldConsole = console; 

    // Use a pre-existing #console element or create a new one. 
    var newConsole = document.getElementById("console") || (function() { 
     var pre = document.createElement('pre'); 
     pre.setAttribute('id', 'console'); 
     document.body.insertBefore(pre, document.body.firstChild); 
     return pre; 
    })(); 

    console = { 
     log: function (message) { 
      var message = ['>', message, '\n'].join(' '); 

      // Log to both consoles... 
      oldConsole.log(message); 
      newConsole.textContent += message; 
     } 
    }; 
})(); 

console.log("This is an unobtrusive version!"); 
console.log("Hello World!"); 
console.log("Test"); 
console.log("Test"); 
console.log("Test"); 
console.log("Test"); 
console.log("Test"); 
console.log("Make it scrollable!"); 

Bạn có thể thấy một phiên bản làm việc của nó ở đây: http://jsfiddle.net/Lanlost/7n6jka2q/

Answer 4

Cách tôi làm điều đó là thêm https://getfirebug.com/firebug-lite-debug.js như một kịch bản bên ngoài.