Cetak Var di JsFiddle

200

Bagaimana saya mencetak sesuatu ke layar hasil di JsFiddle dari JavaScript saya. Saya tidak bisa menggunakan document.write(), juga tidak mengizinkannya print.

Apa yang harus saya gunakan?

aritroper
sumber
3
Lihatlah contoh ini. jsfiddle.net/jadiagaurang/m58Rn
Gaurang Jadia
@ GaurangJadia Itu berguna, Anda harus menambahkannya sebagai jawaban (satu-satunya masalah adalah console.log()menerima argumen berbeda dari fungsi kustom Anda).
IQAndreas
Ini pada dasarnya adalah kebutuhan untuk console.log () ...
Evan Carroll
1
Kemungkinan rangkap dari Cara mendapatkan konsol di dalam jsfiddle
Evan Carroll
Saat ini jsfiddle memungkinkan penggunaan document.write ()
Rubén

Jawaban:

499

Untuk dapat melihat output dari console.log()dalam JSFiddle, buka Sumber Daya Eksternal pada panel sisi kiri dan tambahkan tautan berikut untuk Firebug:

https://getfirebug.com/firebug-lite-debug.js

Contoh hasil setelah menambahkan firebug-lite-debug.js

davidkelleher
sumber
10
Jawaban yang luar biasa. Pada dasarnya membagi panel output menjadi dua panel.
Jack
2
Persis apa yang saya cari!
Pratyush
44
Saya berharap JSFiddle akan melakukan ini secara default, atau setidaknya memiliki kotak centang yang sangat jelas untuk mengaktifkannya dengan satu klik.
Lily Finley
5
konsol hanya muncul setelah Anda menjalankan kode untuk pertama kalinya! jawaban bagus btw!
Peter Piper
4
Apakah ada yang seperti ini untuk Chrome? Sebenarnya JSFiddle harus mendukung sesuatu seperti ini di luar kotak, itu akan sangat membantu.
Harshay Buradkar
67

Saya memiliki template untuk tujuan ini ; di sini adalah kode yang saya gunakan:

HTML

<pre id="output"></pre>

JavaScript

function out()
{
    var args = Array.prototype.slice.call(arguments, 0);
    document.getElementById('output').innerHTML += args.join(" ") + "\n";
}

Penggunaan sampel (JavaScript)

out("Hello world!");
out("Your lottery numbers are:", Math.random(), 999, Math.PI);
out("Today is", new Date());
IQAndreas
sumber
Dan untuk mencetak objek cetak ... out (JSON.stringify (myObject, null, 2));
Andrew Lank
Perhatikan bahwa ini akan memiliki masalah dengan karakter '<' atau '>' yang tidak terhapuskan, dan itu juga akan muntah ketika nilai argumen <undefined>. Ini mungkin bukan masalah untuk kasus penggunaan Anda, tetapi sesuatu yang harus diperhatikan saat mengganti panggilan ke console.log ().
Steve Hollasch
Versi yang ditingkatkan: menggunakan innerTextalih-alih innerHTMLdan mengirim log ke konsol asli juga: function newLog(oldLog) { return function() { var args = Array.prototype.slice.call(arguments, 0); document.getElementById('console-log').innerText += args.join(" ") + "\n"; oldLog.apply(this, args) } } console.log = newLog(console.log) console.error = newLog(console.error) Contoh
JSFiddle
Entah bagaimana ini tidak menunjukkan apa-apa kepada saya ketika mencoba jsfiddle. :(
Suma
@ Souma Hm, mungkin ada kesalahan JavaScript. Ini berjalan dengan baik di komputer saya, tetapi Anda mungkin menggunakan versi yang berbeda. Coba buka konsol debug dan cari kesalahan (pastikan untuk menekan tombol Run di sudut kiri atas saat melakukannya)
IQAndreas
39

Mencoba:

document.getElementById('element').innerHTML = ...;

Fiddle: http://jsfiddle.net/HKhw8/

Perangkap Api
sumber
2
Anda dapat menggunakan document.getElementById('element').innerHTML += [stuff here] + "<br/>";jika Anda ingin memiliki beberapa baris dan menambahkan informasi ke halaman, bukan hanya mengganti informasi yang lama.
IQAndreas
27

Mungkin tidak melakukan apa yang Anda lakukan, tetapi Anda bisa mengetik

console.log(string)

Dan itu akan mencetak string ke konsol browser Anda . Di chrome push CTRL+ SHIFT+ Juntuk membuka konsol.

Euphe
sumber
3
Atau Anda dapat menggunakan CTRL+ SHIFT+ Kjika Anda ingin konsol merapat di bagian bawah halaman, alih-alih melayang di jendela yang terpisah.
IQAndreas
8

Anda dapat melakukan ini ---> http://jsfiddle.net/chY5y/

$('body').append(yourVariable); 
Mohammad Adil
sumber
1
Hhmmm, tidak berfungsi ... bagaimana saya akan mencetak teks sederhana bersama dengan variabel
aritroper
7

Sekarang jsfiddle dapat melakukannya dari awal. Cukup buka Javascrpt -> Frameworks & extensions -> Jquery (edge) dan centang kotak centang Firebug lite

vkabachenko
sumber
Tapi saya kehilangan penyorotan dengan ini :(
Chintan Pathak
5

document.body.innerHTML = "Data Anda";

Igor Vaschuk
sumber
Lebih baik lagi, lakukan + = untuk menambahkan. Yaitu ,:document.body.innerHTML += "Your data" + "<br/>"; document.body.innerHTML += "Even more data" + "<br/>";
Michael Zlatkovsky - Microsoft
4

Dengan ES6 trik bisa jadi

function say(...args)
{ 
    document.querySelector('#out').innerHTML += args.join("</br>");
}
say("hi","john");

Tambahkan saja

 <span id="out"></span>

dalam HTML

JohnPan
sumber
0

Hanya untuk menambahkan sesuatu yang mungkin berguna bagi beberapa orang ....

Jika Anda menambahkan konsol debugger seperti yang ditunjukkan di atas, Anda dapat mengakses ruang lingkup dengan menjalankan ini:

scope = angular.element (document.querySelector ('[ng-controller = MyCtrl]')). scope ();

Saya menemukan memeriksa ruang lingkup secara langsung lebih mudah daripada console.log, alert (), dll.

Neph
sumber
apakah Anda memiliki contoh penggunaan, saya tidak mengikuti.
wide_eyed_pupil
Saya tidak tahu mengapa saya menjawab dengan jawaban Angular, saya kira salah utas.
Neph
0

Jika Anda menggunakan JSfiddle, Anda dapat menggunakan perpustakaan ini: https://github.com/IonicaBizau/console.js

Tambahkan rawgit of the lib ke sumber jsfiddle Anda: https://cdn.rawgit.com/IonicaBizau/console.js/0ee8fcc4ea802247c5a7a8e3c6530ede8ade308b/lib/console.min.js

Maka Anda bisa menambahkan ini dalam HTML:
<pre class="console"></pre>

Inisialisasi konsol di JS Anda:
ConsoleJS.init({selector: "pre.console"});

Contoh Penggunaan: Lihat di jsfiddle

ConsoleJS.init({selector: "pre.console"});

let b;

console.log('hello world');
console.log([{'a':10,'b':44}]);
console.log(typeof [1,2,3,4]);
console.log(50 +67);
console.log(b);
Emmanuel NK
sumber
-4

Gunakan alert()fungsinya:

alert(variable name);
alert("Hello World");
Ashutosh Jha
sumber
1
alert tidak pernah menjadi alat debugging yang baik - tidak menampilkan objek, mengganggu perilaku kode, dll.
Muers