Cara mendapatkan konsol di dalam jsfiddle

104

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?

Adam Buchanan Smith
sumber
2
Adakah kemungkinan biola itu melakukan sesuatu seperti ini? jsfiddle.net/FL4XL
JonSG
3
@VtoCorleone ini yang saya inginkan jsfiddle.net/c42vd3m9/1 CodeBroJohn menjawabnya. Sangat berguna
Adam Buchanan Smith
1
Saya memilih untuk menutup pertanyaan ini sebagai di luar topik karena ini tentang layanan web
Evan Carroll
1
@EvanCarroll JS Fiddle adalah perangkat lunak yang biasa digunakan oleh programmer sehingga sesuai dengan topik di situs ini. Ref. pusat bantuan .
Rubén
1
Pertanyaan ini tidak cukup jelas ketika saya mencari ini, saya hanya menginginkan solusi JavaScript, bukan konsol perpustakaan tertentu yang menggunakan jQuery. Ini bukan hal yang buruk; namun, mungkin menyertakan lebih banyak informasi seperti referensi jsfiddle Anda untuk pertanyaan tersebut.
Dalton

Jawaban:

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

Contoh Pengaturan

Yang seharusnya menambahkan konsol sebaris ke bagian bawah tab hasil

Contoh Output

CodeBroJohn
sumber
19
itu hanya harus dimasukkan bahwa Anda perlu mengatur javascript Anda untuk menggunakan perpustakaan tepi jQuery atau subset dari jQuery untuk melihat opsi lite firebug, jika tidak, itu tidak akan muncul dengan mudah.
Tope
4
Jawaban di bawah ini sepertinya solusi yang lebih baik jika Anda tidak ingin menggunakan JQuery.
Robert
Solusi ini mengharuskan Anda menggunakan jQuery, bukan JavaScript vanilla.
Dalton
95

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
pengguna1855278
sumber
saya mencari ini dan ini melakukan pekerjaan. Meskipun untuk melihat grafik objek di log, alih-alih [Objek Objek], cukup tekan F12 dan lihat log di konsol browser.
cirovladimir
1
Bagus! meskipun masih mencetak [Objek Objek] jelek dan mencetak tiga titik untuk objek bersarang. Meskipun demikian, ini sangat membantu dalam beberapa kasus. Saya menggunakan konsol browser web sekarang.
cirovladimir
ini berlaku hanya untuk HTML kosong (hanya javascript)
ng10
32
  • 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

pemain0
sumber
3
The gif benar-benar membantu.
AlexMelw
1
@ Ruben, kecuali bahwa jawaban ini muncul sebelum pemungutan suara teratas jadi layak mendapatkan pujian! + gif sangat membantu !!
Anshuman Manral
15

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

Konsol Alat Pengembang

Amrit Gautam
sumber
1
Saya terkejut melihat bagaimana jawaban ini diremehkan. Jawabannya tampaknya cukup realistis, sederhana dan tidak berlebihan. Ada penjelasan ?? Setidaknya, saya mencoba menyarankan alternatif lain dan solusi yang mungkin.
Amrit Gautam
1
Saya minta maaf karena suara negatifnya mengecewakan Anda. Suara negatif tidak ada hubungannya dengan metode Anda - itu karena ini bukan jawaban atas pertanyaan. Ini adalah saran alternatif dan akan lebih baik ditempatkan sebagai komentar untuk pertanyaan OP. Saya tidak dapat menghapus downvote kecuali Anda memperbarui jawabannya dan saya hanya akan menghapusnya jika pembaruan menjadikan ini jawaban atas pertanyaan atau memberikan serangkaian alasan yang masuk akal mengapa metode ini adalah opsi yang layak di atas apa yang diminta OP.
William Patton
Menggunakan Konsol console.log()bawaan Browser, saya dapat melihat hasil seperti yang Anda tunjukkan, tetapi saya masih tidak dapat berinteraksi dengan variabel di jsfiddle. Apakah ada cara untuk melakukannya?
krubo
2
Upvote, karena saya juga tidak melihat opsi untuk ekstensi firebug, solusi paling sederhana adalah dengan menekan F12
GabrielMSC
1
@AnshumanManral Saya tidak peduli tentang kapan dan di mana itu akan berada di sana, sampai solusi berhasil. Saya tidak melihat alasan apa pun untuk tidak memilih!
Amrit Gautam
14

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")
fernando
sumber
1
Terima kasih atas jawaban Anda, jawaban Anda benar-benar menjawab apa yang saya tanyakan tetapi saya tidak jelas tentang pertanyaan saya, jadi saya akan memberi Anda plus 1, berikut ini tautan ke biola yang menunjukkan apa yang saya bicarakan tentang jsfiddle.net / c42vd3m9 / 1
Adam Buchanan Smith
3

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.

Contoh CodePen

Mudo
sumber
Saya juga memperhatikan bahwa saya tidak dapat berinteraksi dengan DOM menggunakan jQuery dan konsol browser asli di Js Fiddle. Dengan CodePen saya dapat membuka konsol asli dan memilih elemen html saya menggunakan pemilih jQuery.
nflauria
3

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

pembakar

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

Cuplikan Tumpukan

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

Konsol jsFiddle

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

KyleMit
sumber
1

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

Karim Ayachi
sumber
0

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.

masukkan deskripsi gambar di sini

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

Thielicious
sumber