Drucken Sie Var in JsFiddle

200

Wie würde ich etwas aus meinem JavaScript auf dem Ergebnisbildschirm in JsFiddle drucken? Ich kann es nicht benutzen document.write(), es erlaubt es auch nicht print.

Was soll ich verwenden?

Aritroper
quelle
3
Schauen Sie sich dieses Beispiel an. jsfiddle.net/jadiagaurang/m58Rn
Gaurang Jadia
@GaurangJadia Das ist praktisch, Sie sollten es als Antwort hinzufügen (das einzige Problem besteht darin, console.log()Argumente anders als Ihre benutzerdefinierte Funktion zu akzeptieren).
IQAndreas
Dies ist im Wesentlichen eine Notwendigkeit für console.log () ...
Evan Carroll
1
Mögliches Duplikat von Wie man eine Konsole in jsfiddle bekommt
Evan Carroll
Heutzutage erlaubt jsfiddle die Verwendung von document.write ()
Rubén

Antworten:

499

Um die Ausgabe von console.log()in JSFiddle zu sehen, gehen Sie zu Externe Ressourcen im linken Bereich und fügen Sie den folgenden Link für Firebug hinzu:

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

Beispiel für das Ergebnis nach dem Hinzufügen von firebug-lite-debug.js

Davidkelleher
quelle
10
Fabelhafte Antwort. Grundsätzlich wird der Ausgabebereich in zwei Bereiche aufgeteilt.
Jack
2
Genau das, wonach ich gesucht habe!
Pratyush
44
Ich wünschte, JSFiddle würde dies standardmäßig tun oder zumindest ein sehr offensichtliches Kontrollkästchen haben, um es mit einem Klick zu aktivieren.
Lily Finley
5
Die Konsole wird erst angezeigt, nachdem Sie den Code zum ersten Mal ausgeführt haben! tolle Antwort übrigens!
Peter Piper
4
Gibt es so etwas für Chrome? Eigentlich sollte JSFiddle so etwas sofort unterstützen, es wäre ziemlich hilfreich.
Harshay Buradkar
67

Ich habe eine Vorlage für diesen Zweck ; Hier ist der Code, den ich benutze:

HTML

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

JavaScript

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

Beispielnutzung (JavaScript)

out("Hello world!");
out("Your lottery numbers are:", Math.random(), 999, Math.PI);
out("Today is", new Date());
IQAndreas
quelle
Und um Druckobjekte zu beschneiden ... out (JSON.stringify (myObject, null, 2));
Andrew Lank
Beachten Sie, dass dies Probleme mit nicht entkappten '<' oder '>' Zeichen hat und dass es auch barf wird, wenn Argumentwerte <undefiniert> sind. Dies ist möglicherweise kein Problem für Ihren Anwendungsfall, aber etwas, das Sie beim Ersetzen von Aufrufen von console.log () beachten sollten.
Steve Hollasch
Verbesserte Version: Verwendet innerTextanstelle von innerHTMLund sendet das Protokoll auch an die Originalkonsole: 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-Beispiel
Oliverpool
Irgendwie zeigt mir das nichts, wenn ich es in jsfiddle versuche. :(
Suma
@Suma Hm, möglicherweise liegt ein JavaScript-Fehler vor. Es läuft gut auf meinem Computer, aber Sie verwenden möglicherweise eine andere Version. Versuchen Sie, die Debug-Konsole zu öffnen und suchen Sie nach Fehlern (stellen Sie sicher, dass Sie die Schaltfläche Ausführen in der oberen linken Ecke drücken, wenn Sie dies tun)
IQAndreas
39

Versuchen:

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

Geige: http://jsfiddle.net/HKhw8/

Flammenfalle
quelle
2
Sie können verwenden, document.getElementById('element').innerHTML += [stuff here] + "<br/>";wenn Sie mehrere Zeilen haben und Informationen zur Seite hinzufügen möchten , anstatt nur die alten Informationen zu ersetzen.
IQAndreas
27

Könnte nicht tun, was Sie tun, aber Sie können tippen

console.log(string)

Und es wird die Zeichenfolge in die Konsole Ihres Browsers drucken . In Chrom drücken Sie CTRL+ SHIFT+ J, um die Konsole zu öffnen.

Euphe
quelle
3
Oder Sie können CTRL+ SHIFT+ verwenden, Kwenn die Konsole am unteren Rand der Seite angedockt werden soll, anstatt in einem separaten Fenster zu schweben.
IQAndreas
8

Sie können dies tun ---> http://jsfiddle.net/chY5y/

$('body').append(yourVariable); 
Mohammad Adil
quelle
1
Hhmmm, funktioniert nicht ... wie würde ich einfachen Text zusammen mit einer Variablen
ausdrucken
7

Jetzt kann jsfiddle es von Grund auf neu machen. Gehen Sie einfach zu Javascrpt -> Frameworks & Extensions -> Jquery (Rand) und aktivieren Sie das Kontrollkästchen Firebug Lite

vkabachenko
quelle
Aber ich verliere die Syntaxhervorhebung damit :(
Chintan Pathak
5

document.body.innerHTML = "Ihre Daten";

Igor Vaschuk
quelle
Besser noch, machen Sie ein + = zum Anhängen. Dh:document.body.innerHTML += "Your data" + "<br/>"; document.body.innerHTML += "Even more data" + "<br/>";
Michael Zlatkovsky - Microsoft
4

Mit ES6 könnten Tricks sein

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

Nur hinzufügen

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

in HTML

JohnPan
quelle
0

Nur um etwas hinzuzufügen, das einigen Leuten nützlich sein könnte ...

Wenn Sie die Debugger-Konsole wie oben gezeigt hinzufügen, können Sie auf den Bereich zugreifen, indem Sie Folgendes ausführen:

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

Ich finde es einfacher, den Bereich direkt zu inspizieren als console.log, alert () usw.

Neph
quelle
Haben Sie ein Beispiel für eine Verwendung, folge ich nicht.
wide_eyed_pupil
Ich habe keine Ahnung, warum ich mit einer Angular-Antwort geantwortet habe, falscher Thread, denke ich.
Neph
0

Wenn Sie JSfiddle verwenden, können Sie diese Bibliothek verwenden: https://github.com/IonicaBizau/console.js

Fügen Sie Ihren jsfiddle-Ressourcen einen Rawgit der Bibliothek hinzu: https://cdn.rawgit.com/IonicaBizau/console.js/0ee8fcc4ea802247c5a7a8e3c6530ede8ade308b/lib/console.min.js

Dann können Sie dies einfach im HTML hinzufügen:
<pre class="console"></pre>

Initialisieren Sie die Konsole in Ihrem JS:
ConsoleJS.init({selector: "pre.console"});

Anwendungsbeispiel : Siehe es auf 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
quelle
-4

Verwenden Sie die alert()Funktion:

alert(variable name);
alert("Hello World");
Ashutosh Jha
quelle
1
Warnung ist nie ein gutes Debugging-Tool - zeigt keine Objekte, unterbricht das Verhalten des Codes usw. usw.
Muers