วิธีรับคอนโซลภายใน jsfiddle

ฉันจะทำให้คอนโซลแสดงในซอบน JSfiddle.com ได้อย่างไร

เมื่อเร็ว ๆ นี้ฉันเห็นซอที่มีคอนโซลฝังอยู่ในตัวซอมีใครรู้บ้างว่ามันทำได้อย่างไร?

1. ขยายแผง JavaScript
2. เลือกjQuery Edge
3. เลือกFirebug Lite

ซึ่งควรเพิ่มคอนโซลแบบอินไลน์ที่ด้านล่างของแท็บผลลัพธ์

สวยเรียบง่าย ..

ตัวอย่าง

github

เพียงเพิ่ม URL ต่อไปนี้ใน External Resources ใน jsfiddle คุณจะเห็น console.log และ console.error ในหน้าจอผลลัพธ์

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

• คลิกที่ลูกศรข้างJavaScript
• และในฐานะFRAMEWORKS & EXTENSIONSให้เลือกNo-Libary (Pure JS)
• วางของคุณconsole.log('foo');ในกล่อง JS
• ภายใต้ทรัพยากรเพิ่มhttps://rawgit.com/eu81273/jsfiddle-console/master/console.js
  • หรือ: ภายใต้ทรัพยากรเพิ่มhttps://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
• และเรียกใช้สคริปต์ของคุณโดยกดปุ่ม Play นั้น

ฉันไม่พบตัวเลือกใด ๆ ในการเลือกส่วนขยาย Firebug ในตัวเลือกเกียร์ JavaScript และฉันไม่ต้องการเพิ่มลิงก์ / ไลบรารีภายนอก แต่มีวิธีง่ายๆอีกวิธีหนึ่ง

คุณสามารถใช้คอนโซลในตัวของเบราว์เซอร์

ใช้งานได้ดี ... ที่นี่

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

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

วิธีแก้ปัญหาข้างต้นไม่ได้ผลสำหรับฉันเนื่องจากฉันต้องการคอนโซลแบบโต้ตอบเพื่อให้สามารถตั้งค่าตัวแปรแบบไดนามิกเมื่อทดสอบการเกิดปฏิกิริยาใน Vue.js

ดังนั้นฉันจึงเปลี่ยนไปใช้Codepenซึ่งมีคอนโซลแบบโต้ตอบที่กำหนดขอบเขตไปยังแอปพลิเคชันของคุณ

มีหลายวิธีในการฝังคอนโซลเสมือนภายในหน้าเว็บ ...

1. Firebug Lite Debugger ^Demo

รวมสคริปต์ต่อไปนี้จากFirebug Liteซึ่งให้บริการผ่านraw.githack.com :

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

2. การ^{สาธิต}คอนโซลเสมือนของ Stack Snippets

รวมสคริปต์ต่อไปนี้จาก/ u / canonซึ่งใช้ในStack Snippets :

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

3. เพิ่ม jsFiddle Console ^Demo

รวมสคริปต์ต่อไปนี้จากeu81273ซึ่งให้บริการผ่านraw.githack.com :

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

4. ม้วนคุณเป็นเจ้าของ

นี่คือการใช้งานที่ไม่สำคัญซึ่งจะตัดการconsole.logโทรที่มีอยู่แล้วทิ้งอาร์กิวเมนต์ที่กำหนดไว้ล่วงหน้า โดยใช้: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])

อ่านเพิ่มเติม

• พิมพ์ Var ใน JsFiddle

สำหรับการอ้างอิงในอนาคต: jsfiddle-console จากคำตอบคือสิ่งที่ฉันต้องการเมื่อสอนชั้นเรียนบน JavaScript อย่างไรก็ตามฉันพบว่ามีข้อ จำกัด เกินกว่าที่จะใช้งานได้จริงในสถานการณ์นี้ ก็เลยทำของตัวเอง

ไม่แน่ว่าจะให้บริการใครก็ได้ที่นี่

เพียงเพิ่มรุ่น CDN ลงในทรัพยากรของ jsFiddle:

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

ตัวอย่างที่นี่: https://jsfiddle.net/Brutac/e5nsp2mu/

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

ฉันอาจจะไปงานปาร์ตี้ แต่อยากจะพูดถึงว่า JSfiddle เพิ่งเปิดตัวคุณสมบัติคอนโซลใหม่ เพียงแค่เปิดในการตั้งค่าหากไม่ได้ผลสำหรับคุณ

ยังอยู่ในรุ่นเบต้า แต่เดี๋ยวก่อน ... ไม่มีวิธีแก้ปัญหาที่น่ารำคาญอีกต่อไป