Jsfiddle'a konsol nasıl alınır

104

Konsolu JSfiddle.com'da bir keman olarak nasıl gösterebilirim?

Geçenlerde konsolun keman içine gömülü olduğu bir keman gördüm, bunun nasıl yapılacağını bilen var mı?

javascript console jsfiddle

— Adam Buchanan Smith
kaynak

2

Keman böyle bir şey yapmış olabilir mi? jsfiddle.net/FL4XL

— JonSG

3

@VtoCorleone istediğim buydu jsfiddle.net/c42vd3m9/1 CodeBroJohn cevapladı. Super yararlı

— Adam Buchanan Smith

1

Bu soruyu konu dışı olarak kapatmak için oy veriyorum çünkü bu bir web hizmeti hakkında

— Evan Carroll

1

@EvanCarroll JS Fiddle, programcılar tarafından yaygın olarak kullanılan bir yazılım aracıdır , bu nedenle bu sitede konu başlığı altındadır . Ref. yardım merkezi .

— Rubén

1

Bunu araştırdığımda bu soru yeterince açık değil, jQuery kullanan belirli bir kitaplık konsolu değil, yalnızca bir JavaScript çözümü istedim. Bu kötü bir şey değil; ancak soruya jsfiddle referansınız gibi daha fazla bilgi ekleyebilirsiniz.

— Dalton

74

JavaScript panelini genişletin
JQuery Edge'i seçin
Firebug Lite'ı seçin .

Sonuçlar sekmesinin altına bir satır içi konsol eklemelidir

— CodeBroJohn
kaynak

19

firebug lite seçeneğini görmek için javascript'inizin jQuery edge kitaplığını veya jQuery'nin bir alt kümesini kullanacak şekilde ayarlanması gerektiği eklenmelidir, aksi takdirde kolayca görünmez.

— Tope

4

JQuery'yi kullanmak istemiyorsanız aşağıdaki yanıt daha iyi bir çözüm gibi görünüyor.

— Robert

Bu çözüm, vanilya JavaScript'i değil jQuery kullanmanızı gerektirir.

— Dalton

95

oldukça basit bir ...

misal

github

Jsfiddle'daki Harici Kaynaklara aşağıdaki URL'yi eklemeniz yeterlidir, sonuç ekranında console.log ve console.error göreceksiniz.

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

— kullanıcı1855278
kaynak

Bunu arıyordum ve işi bu yapıyor. Günlükte nesne grafiğini [nesne Nesne] yerine görüntülemek için F12'ye basın ve tarayıcı konsolunda günlükleri görün.

— cirovladimir

1

harika! yine de çirkin [nesne Nesnesini] yazdırıyor olmasına ve iç içe nesneler için üç nokta yazdırmasına rağmen. Yine de bazı durumlarda çok faydalıdır. Şimdi web tarayıcı konsolunu kullanıyorum.

— cirovladimir

bu yalnızca boş HTML için geçerlidir (yalnızca javascript)

— ng10

32

JavaScript'in yanındaki o oku tıklayın
ve FRAMEWORKS & EXTENSIONS olarak No-Libary (Pure JS) öğesini seçin.
console.log('foo');JS kutusuna yapıştırın
Kaynaklar altında eklehttps://rawgit.com/eu81273/jsfiddle-console/master/console.js
- veya: Kaynaklar altında ekleyinhttps://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
ve o Oynat düğmesine basarak komut dosyanızı çalıştırın

— oyuncu0
kaynak

3

Gif gerçekten yararlıdır.

— AlexMelw

1

@Ruben, bu cevabın en çok oylanandan önce çıkması dışında övgüyü hak ediyor! + gif gerçekten yardımcı oluyor !!

— Anshuman Manral

15

JavaScript dişli seçeneğinde Firebug uzantısını seçmek için herhangi bir seçenek bulamadım ve harici bağlantılar / kitaplıklar eklemek istemedim, ancak başka bir basit çözüm var.

Tarayıcınızın yerleşik konsolunu kullanabilirsiniz

— Amrit Gautam
kaynak

1

Bu cevabın nasıl reddedildiğini görünce şaşırdım. Cevap oldukça gerçekçi, basit ve gereksiz görünüyor. Herhangi bir açıklama? En azından başka alternatifler ve olası çözümler önermeye çalışıyorum.

— Amrit Gautam

1

Olumsuz oy sizin için üzücü olduğu için üzgünüm. Olumsuz oy, yönteminizle hiçbir ilgisi yoktur - çünkü bu sorunun cevabı değildir. Bu bir alternatif önerisidir ve OP sorusuna bir yorum olarak yerleştirilmesi daha iyi olacaktır. Yanıtı güncellemediğiniz sürece olumsuz oyu kaldıramıyorum ve yalnızca güncelleme bunu soruya bir yanıt verdiyse veya bu yöntemin neden OP'nin istediğinin üzerinde geçerli bir seçenek olmasının makul bir nedenini sağladıysa kaldırırım.

— William Patton

Tarayıcının yerleşik Konsolunu kullanarak, console.log()gösterdiğiniz gibi sonuçlarını görebiliyorum , ancak yine de jsfiddle'daki değişkenlerle etkileşim kuramıyorum. Bunu yapmanın bir yolu var mı?

— krubo

2

Olumlu oy verin, çünkü kundakçılık eklentisi seçeneğini de görmüyorum, en basit çözüm F12'ye

— basmaktır

1

@AnshumanManral Çözüm işe yarayana kadar ne zaman ve nerede olacağı umurumda değil. Yine de olumsuz oy kullanmak için bir neden görmüyorum!

— Amrit Gautam

14

iyi çalışıyor ... burada

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

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

— Fernando
kaynak

1

Cevabınız için teşekkür ederim, cevabınız tam anlamıyla sorduğum şeyi cevaplıyor ama sorumda

— Adam Buchanan Smith

3

Vue.js'de reaktiviteyi test ederken dinamik olarak bir değişken ayarlayabilmek için etkileşimli bir konsola ihtiyacım olduğu için yukarıdaki çözümlerden hiçbiri benim için işe yaramadı.

Bu yüzden uygulamanıza yönelik etkileşimli bir konsolu olan Codepen'e geçtim .

— Mudo
kaynak

Ayrıca jQuery ve Js Fiddle'daki yerel tarayıcı konsolunu kullanarak DOM ile etkileşim kuramadığımı da fark ettim. CodePen ile yerel konsolu açabildim ve jQuery seçicileri kullanarak html öğelerimi seçebildim.

— nflauria

3

Herhangi bir web sayfasının içine sanal bir konsol yerleştirmenin birkaç yolu vardır ...

1. Firebug Lite Debugger ^Demosu

Raw.githack.com aracılığıyla sunulan Firebug Lite'tan aşağıdaki komut dosyasını ekleyin :

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

2. Yığın Parçacıkları Sanal Konsol ^Demosu

Yığın Parçacıkları'nda kullanılan / u / canon'daki aşağıdaki komut dosyasını dahil edin :

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

3. jsFiddle Konsol ^Demosunu ekleyin

Aşağıdaki komut dosyasını ekleyin eu81273 kullanılarak yayınlanan raw.githack.com :

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

4. Sahip Olun

İşte mevcut console.logçağrıyı sarmalayan ve ardından güzelleştirilmiş argümanları kullanarak atan önemsiz bir uygulama 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])

Snippet'i genişlet

Daha fazla okuma

JsFiddle'da Var Yazdır

— KyleMit
kaynak

1

Gelecekte başvurmak için: Jsfiddle-console, bir sınıfa JavaScript dersi verirken tam olarak ihtiyacım olan cevaptı. Ancak, bu durumda herhangi bir fiili kullanım için çok sınırlı olduğunu buldum. Ben de kendim yaptım.

Belki buradaki herkese hizmet eder.

CDN sürümünü jsFiddle kaynaklarına eklemeniz yeterlidir:

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

Örnek burada: https://jsfiddle.net/Brutac/e5nsp2mu/

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

— Karim Ayaçi
kaynak

0

Partiye geç kalmış olabilirim, ancak JSfiddle'ın yeni konsol özelliğini henüz yayınladığını belirtmek istedim. İşinize yaramazsa Ayarlar'dan açmanız yeterlidir.

Hala beta sürümünde ama hey ... artık sinir bozucu çözümler yok.

— Thielicious
kaynak