Wydrukuj Var w JsFiddle

200

Jak mam wydrukować coś na ekranie wyników w JsFiddle z mojego JavaScript. Nie mogę użyć document.write(), to też nie pozwala print.

Czego powinienem użyć?

aritroper
źródło
3
Sprawdź ten przykład. jsfiddle.net/jadiagaurang/m58Rn
Gaurang Jadia
@GaurangJadia Jest to przydatne, powinieneś dodać je jako odpowiedź (jedynym problemem jest console.log()akceptacja argumentów inaczej niż w przypadku niestandardowej funkcji).
IQAndreas
Jest to w zasadzie potrzeba na konsoli.log () ...
Evan Carroll
1
Możliwy duplikat Jak uzyskać konsolę w jsfiddle
Evan Carroll
Obecnie jsfiddle pozwala na użycie document.write ()
Rubén

Odpowiedzi:

499

Aby zobaczyć dane wyjściowe console.log()w JSFiddle, przejdź do Zasoby zewnętrzne w panelu po lewej stronie i dodaj następujący link do Firebug:

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

Przykład wyniku po dodaniu firebug-lite-debug.js

davidkelleher
źródło
10
Fantastyczna odpowiedź. Zasadniczo dzieli panel wyjściowy na dwa panele.
Jack
2
Dokładnie tego szukałem!
Pratyush
44
Chciałbym, aby JSFiddle zrobił to domyślnie lub przynajmniej miał bardzo oczywiste pole wyboru, aby włączyć je jednym kliknięciem.
Lily Finley,
5
konsola pojawia się dopiero po pierwszym uruchomieniu kodu! świetna odpowiedź btw!
Peter Piper,
4
Czy jest coś takiego dla Chrome? W rzeczywistości JSFiddle powinien obsługiwać coś takiego po wyjęciu z pudełka, byłoby to całkiem pomocne.
Harshay Buradkar,
67

Mam do tego celu szablon ; oto kod, którego używam:

HTML

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

JavaScript

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

Przykładowe użycie (JavaScript)

out("Hello world!");
out("Your lottery numbers are:", Math.random(), 999, Math.PI);
out("Today is", new Date());
IQAndreas
źródło
I do pritty print obiektów ... out (JSON.stringify (myObject, null, 2));
Andrew Lank,
Zauważ, że będzie to miało problemy ze znakami „<” lub „>” bez nieokreślonych znaków, i że będzie również występować, gdy wartości argumentów będą <zdefiniowane>. Może to nie stanowić problemu w twoim przypadku użycia, ale coś, o czym należy pamiętać przy zastępowaniu wywołań funkcji console.log ().
Steve Hollasch,
Ulepszona wersja: używa innerTextzamiast innerHTMLi wysyła dziennik do oryginalnej konsoli: 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) przykład
JSFiddle
Jakoś to nic mi nie pokazuje, gdy próbuję w jsfiddle. :(
Suma
@Suma Hm, może występować błąd JavaScript. Działa dobrze na moim komputerze, ale być może używasz innej wersji. Spróbuj otworzyć konsolę debugowania i poszukaj błędów (pamiętaj, aby w tym czasie nacisnąć przycisk Uruchom w lewym górnym rogu)
IQAndreas 28.04.17
39

Próbować:

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

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

Flame Trap
źródło
2
Możesz użyć, document.getElementById('element').innerHTML += [stuff here] + "<br/>";jeśli chcesz mieć wiele wierszy i dodać informacje do strony, zamiast po prostu zastępować stare informacje.
IQAndreas
27

Może nie robić tego, co robisz, ale możesz pisać

console.log(string)

I wydrukuje ciąg w konsoli przeglądarki . W chrome naciśnij CTRL+ SHIFT+, Jaby otworzyć konsolę.

Euphe
źródło
3
Możesz także użyć CTRL+ SHIFT+, Kjeśli chcesz zadokować konsolę u dołu strony, zamiast pływać w osobnym oknie.
IQAndreas
8

Możesz to zrobić ---> http://jsfiddle.net/chY5y/

$('body').append(yourVariable); 
Mohammad Adil
źródło
1
Hhmmm, nie działa ... jak wydrukowałbym prosty tekst wraz ze zmienną
aritroper
7

Teraz jsfiddle może to zrobić od zera. Wystarczy przejść do JavaScriptu -> Frameworki i rozszerzenia -> Jquery (edge) i zaznaczyć pole wyboru Firebug lite

vkabachenko
źródło
Ale tracę podkreślanie składni za pomocą tego :(
Chintan Pathak
5

document.body.innerHTML = „Twoje dane”;

Igor Vaschuk
źródło
Jeszcze lepiej, dodaj + =, aby dołączyć. To document.body.innerHTML += "Your data" + "<br/>"; document.body.innerHTML += "Even more data" + "<br/>";
znaczy,
4

Z ES6 sztuczki mogą być

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

Dodaj tylko

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

w HTML

JohnPan
źródło
0

Aby dodać coś, co może być przydatne dla niektórych ludzi ...

Jeśli dodasz konsolę debugowania, jak pokazano powyżej, możesz uzyskać dostęp do zakresu, wykonując następujące czynności:

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

Uważam, że sprawdzanie zasięgu jest łatwiejsze niż console.log, alert () itp.

Nef
źródło
czy masz przykładowe zastosowanie, nie podążam.
wide_eyed_pupil
Nie mam pojęcia, dlaczego odpowiedziałem odpowiedzią Angular, chyba zły wątek.
Neph
0

Jeśli używasz JSfiddle, możesz użyć tej biblioteki: https://github.com/IonicaBizau/console.js

Dodaj rawgit biblioteki lib do swoich zasobów jsfiddle: https://cdn.rawgit.com/IonicaBizau/console.js/0ee8fcc4ea802247c5a7a8e3c6530ede8ade308b/lib/console.min.js

Następnie możesz po prostu dodać to w kodzie HTML:
<pre class="console"></pre>

Zainicjuj konsolę w swoim JS:
ConsoleJS.init({selector: "pre.console"});

Przykład użycia: Zobacz to na 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
źródło
-4

Użyj alert()funkcji:

alert(variable name);
alert("Hello World");
Ashutosh Jha
źródło
1
alert nigdy nie jest dobrym narzędziem do debugowania - nie pokazuje obiektów, przerywa zachowanie kodu itp.
Muers