JsFiddle'da Var Yazdır


200

JavaScript'ten JsFiddle'daki sonuç ekranına bir şey nasıl yazdırabilirim. Kullanamıyorum document.write(), buna da izin vermiyor print.

Ne kullanmalıyım?



@GaurangJadia Bu kullanışlı, bir yanıt olarak eklemelisiniz (tek sorun, console.log()özel işlevinizden farklı argümanları kabul etmektir).
— IQAndreas

Bu aslında console.log () için bir ihtiyaçtır ...
— Evan Carroll


Günümüzde jsfiddle document.write ()
— Rubén

Yanıtlar:


499

console.log()JSFiddle'da çıktıyı görebilmek için sol taraftaki panelde Harici Kaynaklar'a gidin ve Firebug için aşağıdaki bağlantıyı ekleyin:

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

Firebug-lite-debug.js eklendikten sonra sonuç örneği


10
Müthiş bir cevap. Temel olarak çıkış bölmesini iki bölmeye ayırır.
— Jack

2
Tam aradığım şey!
— Pratyush

44
Keşke JSFiddle bunu varsayılan olarak yapsın ya da en azından tek bir tıklama ile etkinleştirmek için çok açık bir onay kutusuna sahip olsaydı.
— Lily Finley

5
Konsol yalnızca kodu ilk kez çalıştırdıktan sonra görünür! büyük cevap btw!
— Peter Piper

4
Chrome için böyle bir şey var mı? Aslında JSFiddle bunun gibi bir şeyi kutudan çıkarmalı, oldukça yardımcı olacaktır.
— Harshay Buradkar

67

Bu amaçla bir şablonum var ; İşte kullandığım kod:

HTML

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

JavaScript

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

Örnek kullanım (JavaScript)

out("Hello world!");
out("Your lottery numbers are:", Math.random(), 999, Math.PI);
out("Today is", new Date());

Pritty baskı nesneleri ... dışarı (JSON.stringify (myObject, null, 2));
— Andrew Lank

Bunun çıkış karakteri olmayan '<' veya '>' karakterleriyle ilgili sorunları olacağını ve bağımsız değişken değerleri <defined> olduğunda da engel olacağını unutmayın. Bu, kullanım durumunuz için bir sorun olmayabilir, ancak console.log () çağrılarını değiştirirken dikkat edilmesi gereken bir şey olabilir.
— Steve Hollasch

Geliştirilmiş sürüm: innerTextyerine innerHTMLgünlükleri kullanır ve orijinal konsola gönderir: 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) JSFiddle örneği
— oliverpool

Bir şekilde bu jsfiddle'da çalışırken bana hiçbir şey göstermiyor. :(
— Suma

@Suma Hm, bir JavaScript hatası olabilir. Makinemde iyi çalışıyor, ancak farklı bir sürüm kullanıyor olabilirsiniz. Hata ayıklama konsolunu açmayı deneyin ve hata arayın ( bunu yaparken sol üst köşedeki Çalıştır düğmesine bastığınızdan emin olun )
— IQAndreas

39

Deneyin:

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

Keman: http://jsfiddle.net/HKhw8/


2
Yalnızca eski bilgileri değiştirmek yerine sayfaya document.getElementById('element').innerHTML += [stuff here] + "<br/>";birden çok satır eklemek ve bilgi eklemek istiyorsanız kullanabilirsiniz .
— IQAndreas

27

Yaptıklarınızı yapamayabilir, ancak yazabilirsiniz

console.log(string)

Ve dizeyi tarayıcınızın konsoluna yazdıracaktır . Chrome'da konsolu açmak için CTRL+ + SHIFTtuşlarına Jbasın.


3
Veya konsolun ayrı bir pencerede yüzmek yerine sayfanın altına yerleştirilmesini istiyorsanız CTRL+ SHIFT+ ' Kyı kullanabilirsiniz.
— IQAndreas


7

Şimdi jsfiddle bunu sıfırdan yapabilir. Javascrpt -> Çerçeveler ve uzantılar -> Jquery (kenar) bölümüne gidin ve Firebug lite onay kutusunu işaretleyin


Ama ben bu sözdizimi vurgulayarak gevşek :(
— Chintan Pathak


4

ES6 ile hileler olabilir

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

Yalnızca ekle

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

HTML'de



0

Sadece bazı insanlar için yararlı olabilecek bir şey eklemek için ....

Hata ayıklayıcı konsolunu yukarıda gösterildiği gibi eklerseniz, kapsamı aşağıdakileri yürüterek erişebilirsiniz:

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

Kapsamı doğrudan console.log, alert (), vb.


örnek bir kullanımınız var mı, takip etmiyorum.
— wide_eyed_pupil

Sanırım neden açısal bir cevapla cevap verdiğimi bilmiyorum.
— Nefis

0

JSfiddle kullanıyorsanız şu kütüphaneyi kullanabilirsiniz: https://github.com/IonicaBizau/console.js

Jsfiddle kaynaklarınıza bir lib rawgit ekleyin: https://cdn.rawgit.com/IonicaBizau/console.js/0ee8fcc4ea802247c5a7a8e3c6530ede8ade308b/lib/console.min.js

Ardından bunu HTML'ye ekleyebilirsiniz:
<pre class="console"></pre>

JS'nizdeki konsolu başlatın:
ConsoleJS.init({selector: "pre.console"});

Kullanım Örneği: jsfiddle'da görün

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);

-4

alert()İşlevi kullanın :

alert(variable name);
alert("Hello World");

1
uyarı asla iyi bir hata ayıklama aracı - nesneleri göstermez, kodun davranışını keser, vb
— Muers
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.