Cara mendapatkan konsol di dalam jsfiddle

Bagaimana saya bisa menampilkan konsol di biola di JSfiddle.com?

Saya baru-baru ini melihat sebuah biola yang memiliki konsol yang tertanam di dalam biola, ada yang tahu bagaimana ini bisa dilakukan?

1. Luaskan panel JavaScript
2. Pilih jQuery Edge
3. Pilih Firebug Lite .

Yang seharusnya menambahkan konsol sebaris ke bagian bawah tab hasil

cukup sederhana ..

contoh

github

Cukup tambahkan URL berikut ke Sumber Eksternal di jsfiddle, Anda akan melihat console.log dan console.error di layar hasil.

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

• klik panah di sebelah JavaScript
• dan sebagai FRAMEWORKS & EXTENSIONS pilih No-Libary (Pure JS)
• tempel file console.log('foo'); di kotak JS Anda
• di bawah Sumber daya tambahkanhttps://rawgit.com/eu81273/jsfiddle-console/master/console.js
  • atau: di bawah Sumber daya tambahkanhttps://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
• dan jalankan skrip Anda dengan menekan tombol Putar

Saya tidak dapat menemukan opsi apa pun untuk memilih ekstensi Firebug di opsi roda gigi JavaScript, dan saya tidak ingin menambahkan tautan / pustaka eksternal, tetapi ada satu lagi yang sederhana. solusi lainnya.

Anda dapat menggunakan konsol bawaan browser Anda

bekerja dengan baik ... di sini

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

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

Tidak ada solusi di atas yang berhasil untuk saya, karena saya membutuhkan konsol interaktif agar dapat secara dinamis menetapkan variabel saat menguji reaktivitas di Vue.js.

Jadi saya beralih ke Codepen , yang memiliki konsol interaktif yang mencakup aplikasi Anda.

Ada beberapa cara untuk menyematkan konsol virtual di dalam halaman web mana pun ...

1. ^Demo Firebug Lite Debugger

Sertakan skrip berikut dari Firebug Lite , disajikan melalui raw.githack.com :

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

2. Stack Snippet ^Demo Konsol Virtual

Sertakan skrip berikut dari / u / canon , yang digunakan dalam Stack Snippets :

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

3. Tambahkan ^Demo Konsol jsFiddle

Sertakan skrip berikut dari eu81273 , disajikan melalui raw.githack.com :

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

4. Gulung Anda Milik

Berikut adalah implementasi sepele yang membungkus console.logpanggilan yang ada dan kemudian membuang argumen prettified menggunakan :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])

Bacaan lebih lanjut

• Cetak Var di JsFiddle

Untuk referensi di masa mendatang: jsfiddle-console dari jawaban persis seperti yang saya butuhkan saat mengajar kelas di JavaScript. Namun saya menemukan itu terlalu terbatas untuk digunakan dalam situasi ini. Jadi saya membuatnya sendiri.

Mungkin itu akan melayani siapa pun di sini.

Cukup tambahkan versi CDN ke sumber daya jsFiddle:

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

Contoh di sini: https://jsfiddle.net/Brutac/e5nsp2mu/

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

Saya mungkin terlambat ke pesta tetapi hanya ingin menyebutkan bahwa JSfiddle baru saja merilis fitur konsol baru. Nyalakan saja di Pengaturan jika tidak berhasil untuk Anda.

Masih dalam versi beta tapi hei ... tidak ada lagi solusi yang mengganggu.