Cách tải bảng điều khiển bên trong jsfiddle

Làm cách nào tôi có thể làm cho bảng điều khiển hiển thị trong trò chơi trên JSfiddle.com?

Gần đây tôi đã thấy một trò chơi có bàn điều khiển được nhúng vào trò chơi, có ai biết cách này có thể được thực hiện như thế nào không?

1. Mở rộng bảng JavaScript
2. Chọn jQuery Edge
3. Chọn Firebug Lite .

Điều này sẽ thêm một bảng điều khiển nội tuyến vào cuối tab kết quả

khá đơn giản ..

thí dụ

github

Chỉ cần thêm URL sau vào Tài nguyên bên ngoài trong jsfiddle, bạn sẽ thấy console.log và console.error trong màn hình kết quả.

https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js

• nhấp vào mũi tên đó bên cạnh JavaScript
• và khi FRAMEWORKS & EXTENSIONS chọn No-Libary (Pure JS)
• dán console.log('foo');vào hộp JS của bạn
• dưới Tài nguyên thêmhttps://rawgit.com/eu81273/jsfiddle-console/master/console.js
  • hoặc: trong Tài nguyên thêmhttps://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
• và chạy tập lệnh của bạn bằng cách nhấn vào nút Phát đó

Tôi không thể tìm thấy bất kỳ tùy chọn nào để chọn tiện ích mở rộng Firebug trong tùy chọn bánh răng JavaScript và tôi không muốn thêm các liên kết / thư viện bên ngoài, nhưng có một giải pháp đơn giản khác .

Bạn có thể sử dụng bảng điều khiển tích hợp sẵn của trình duyệt

hoạt động tốt ... ở đây

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

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

Không có giải pháp nào ở trên phù hợp với tôi, vì tôi cần một bảng điều khiển tương tác để có thể đặt động một biến khi kiểm tra khả năng phản ứng trong Vue.js.

Vì vậy, tôi đã chuyển sang Codepen , có một bảng điều khiển tương tác dành cho ứng dụng của bạn.

Có một số cách để nhúng bảng điều khiển ảo vào bên trong bất kỳ trang web nào ...

1. Firebug Lite Debugger ^Demo

Bao gồm tập lệnh sau từ Firebug Lite , được phân phối qua raw.githack.com :

https://rawcdn.githack.com/firebug/firebug-lite/firebug1.5/build/firebug-lite-debug.js

2. ^{Bản trình diễn} bảng điều khiển ảo Stack Snippets

Bao gồm tập lệnh sau từ / u / canon , được sử dụng trong Stack Snippets :

https://stacksnippets.net/scripts/snippet-javascript-console.min.js

3. Thêm jsFiddle Console ^Demo

Bao gồm tập lệnh sau từ eu81273 , được phân phát qua raw.githack.com :

https://raw.githack.com/eu81273/jsfiddle-console/master/console.js

4. Cuốn sách của riêng bạn

Dưới đây là một việc thực hiện tầm thường mà kết thúc tốt đẹp hiện console.logcuộc gọi và sau đó bãi ra tô điểm lập luận sử dụng document.write:

var oldLog = window.console.log
window.console.log = function(...args) {
    document.write(JSON.stringify(args, null, 2));
    oldLog.apply(this, args);
}

console.log("String", 44, {name: "Kyle", age: 30}, [1,2,3])

Đọc thêm

• In Var trong JsFiddle

Để tham khảo trong tương lai: jsfiddle-console from answer là chính xác những gì tôi cần khi dạy một lớp về JavaScript. Tuy nhiên, tôi thấy nó quá hạn chế để có thể sử dụng thực tế trong tình huống này. Vì vậy, tôi đã làm của riêng tôi.

Có lẽ nó sẽ phục vụ bất cứ ai ở đây.

Chỉ cần thêm phiên bản CDN vào tài nguyên của jsFiddle:

https://unpkg.com/html-console-output

Ví dụ ở đây: https://jsfiddle.net/Brutac/e5nsp2mu/

GitHub: https://github.com/karimayachi/html-console-output

Tôi có thể đến muộn bữa tiệc nhưng chỉ muốn đề cập rằng JSfiddle vừa phát hành tính năng bảng điều khiển mới. Chỉ cần bật nó trong Cài đặt nếu nó không phù hợp với bạn.

Vẫn đang trong giai đoạn thử nghiệm nhưng hey ... không còn cách giải quyết khó chịu nào nữa.