Wie bekomme ich eine Konsole in jsfiddle?

104

Wie kann ich die Konsole auf JSfiddle.com in einer Geige anzeigen lassen?

Ich habe kürzlich eine Geige gesehen, bei der die Konsole in die Geige eingebettet war. Weiß jemand, wie das gemacht werden kann?

Adam Buchanan Smith
quelle
2
Gibt es eine Chance, dass die Geige so etwas getan hat? jsfiddle.net/FL4XL
JonSG
3
@VtoCorleone das ist was ich wollte jsfiddle.net/c42vd3m9/1 CodeBroJohn hat darauf geantwortet. Super nützlich
Adam Buchanan Smith
1
Ich stimme dafür, diese Frage als nicht zum Thema gehörend zu schließen, da es sich um einen Webdienst handelt
Evan Carroll
1
@EvanCarroll JS Fiddle ist ein Software-Tool, das häufig von Programmierern verwendet wird und daher auf dieser Website zum Thema gehört. Ref. Hilfezentrum .
Rubén
1
Diese Frage ist bei der Suche nicht klar genug. Ich wollte nur eine JavaScript-Lösung, keine bestimmte Bibliothekskonsole mit jQuery. Das ist keine schlechte Sache; Fügen Sie jedoch möglicherweise weitere Informationen hinzu, z. B. Ihren jsfiddle-Verweis auf die Frage.
Dalton

Antworten:

74
  1. Erweitern Sie das JavaScript-Bedienfeld
  2. Wählen Sie jQuery Edge aus
  3. Wählen Sie Firebug Lite .

Beispiel für Einstellungen

Womit eine Inline-Konsole am unteren Rand der Registerkarte Ergebnisse hinzugefügt werden sollte

Beispiel für die Ausgabe

CodeBroJohn
quelle
19
Es sollte einfach enthalten sein, dass Sie Ihr Javascript eingestellt haben müssen, um die jQuery-Edge-Bibliothek oder eine Teilmenge von jQuery zu verwenden, um die Firebug-Lite-Option zu sehen. Andernfalls wird es nicht sofort angezeigt.
Tope
4
Die Antwort unten sieht nach einer besseren Lösung aus, wenn Sie JQuery nicht verwenden möchten.
Robert
Für diese Lösung müssen Sie jQuery und nicht Vanille-JavaScript verwenden.
Dalton
95

ziemlich einfach ..

Beispiel

Github

Fügen Sie einfach die folgende URL zu Externe Ressourcen in jsfiddle hinzu. Im Ergebnisbildschirm werden console.log und console.error angezeigt.

https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
user1855278
quelle
Ich habe danach gesucht und das macht den Job. Um das Objektdiagramm im Protokoll anzuzeigen, drücken Sie anstelle von [Objektobjekt] einfach F12 und sehen Sie sich die Protokolle in der Browserkonsole an.
Cirovladimir
1
großartig! obwohl es immer noch das hässliche [Objekt Objekt] druckt und drei Punkte für verschachtelte Objekte druckt. Trotzdem ist es in einigen Fällen sehr hilfreich. Ich benutze jetzt allerdings die Webbrowser-Konsole.
Cirovladimir
Dies gilt nur für leeres HTML (nur Javascript)
ng10
32
  • Klicken Sie auf diesen Pfeil neben JavaScript
  • und als FRAMEWORKS & EXTENSIONS wählen Sie No-Libary (Pure JS)
  • Fügen Sie Ihre console.log('foo');in JS-Box ein
  • unter Ressourcen hinzufügenhttps://rawgit.com/eu81273/jsfiddle-console/master/console.js
    • oder: unter Ressourcen hinzufügenhttps://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
  • und führen Sie Ihr Skript aus, indem Sie auf die Wiedergabetaste klicken

player0
quelle
3
Das GIF ist wirklich hilfreich.
AlexMelw
1
@ Ruben, außer dass diese Antwort erschien, bevor die oberste gewählt wurde, also verdient die Anerkennung! + das gif hilft wirklich !!
Anshuman Manral
15

Ich konnte keine Option zum Auswählen der Firebug-Erweiterung in der JavaScript-Ausrüstungsoption finden und wollte keine externen Links / Bibliotheken hinzufügen, aber es gibt eine andere einfache Lösung.

Sie können die integrierte Konsole Ihres Browsers verwenden

Dev Tools Console

Amrit Gautam
quelle
1
Ich bin überrascht zu sehen, wie diese Antwort abgelehnt wird. Die Antwort scheint ziemlich realistisch, einfach und nicht redundant zu sein. Irgendeine Erklärung? Zumindest versuche ich andere Alternativen und mögliche Lösungen vorzuschlagen.
Amrit Gautam
1
Es tut mir leid, dass die Ablehnung für Sie ärgerlich ist. Downvote hat nichts mit Ihrer Methode zu tun - weil dies keine Antwort auf die Frage ist. Es ist ein Vorschlag für eine Alternative und das wäre besser als Kommentar zur OP-Frage. Ich kann das Downvote nur entfernen, wenn Sie die Antwort aktualisieren, und ich würde es nur entfernen, wenn das Update dies zu einer Antwort auf die Frage macht oder eine Reihe vernünftiger Gründe liefert, warum diese Methode eine praktikable Option ist, die über das hinausgeht, was OP verlangt.
William Patton
Mit der in der Konsole integrierten Browser kann ich die Ergebnisse sehen, console.log()wie Sie zeigen, aber ich kann immer noch nicht mit Variablen in der jsfiddle interagieren. Gibt es eine Möglichkeit, dies zu tun?
Krubo
2
Upvote, da ich die Option für die Firebug-Erweiterung auch nicht sehe, ist die einfachste Lösung, einfach F12
GabrielMSC
1
@AnshumanManral Es ist mir egal, wann und wo es dort sein wird, bis die Lösung funktioniert. Ich sehe jedoch keinen Grund, abzustimmen!
Amrit Gautam
14

funktioniert gut ... hier

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

console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};
console.log("Hello Console")
fernando
quelle
1
Vielen Dank für Ihre Antwort. Ihre Antwort beantwortet buchstäblich das, was ich gefragt habe, aber meine Frage war mir nicht klar. Ich gebe Ihnen ein Plus von 1. Hier ist ein Link zu einer Geige, die zeigt, worüber ich gesprochen habe. Jsfiddle.net / c42vd3m9 / 1
Adam Buchanan Smith
3

Keine der oben genannten Lösungen funktionierte für mich, da ich eine interaktive Konsole benötigte , um beim Testen der Reaktivität in Vue.js eine Variable dynamisch festlegen zu können.

Also bin ich zu Codepen gewechselt , das eine interaktive Konsole für Ihre Anwendung hat.

CodePen-Beispiel

Mudo
quelle
Ich habe auch festgestellt, dass ich mit jQuery und der nativen Browserkonsole in Js Fiddle nicht mit dem DOM interagieren konnte. Mit CodePen konnte ich die native Konsole öffnen und meine HTML-Elemente mit jQuery-Selektoren auswählen.
Nflauria
3

Es gibt verschiedene Möglichkeiten, eine virtuelle Konsole in eine Webseite einzubetten ...

1. Firebug Lite Debugger Demo

Fügen Sie das folgende Skript von Firebug Lite hinzu , das über raw.githack.com bereitgestellt wird :

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

Feuerwanze

2. Stack Snippets Virtual Console Demo

Fügen Sie das folgende Skript aus / u / canon hinzu , das in Stack Snippets verwendet wird :

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

Stapelschnipsel

3. Fügen Sie die jsFiddle Console- Demo hinzu

Fügen Sie das folgende Skript von eu81273 hinzu , das über raw.githack.com bereitgestellt wird :

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

jsFiddle Console

4. Roll You Own

Hier ist eine triviale Implementierung, die den vorhandenen console.logAufruf umschließt und dann die hübschen Argumente mit document.writefolgenden Elementen ausgibt :

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

Weiterführende Literatur

KyleMit
quelle
1

Zum späteren Nachschlagen: Die jsfiddle-Konsole von answer war genau das, was ich brauchte, um eine Klasse über JavaScript zu unterrichten. Ich fand es jedoch zu begrenzt, um in dieser Situation tatsächlich von Nutzen zu sein. Also habe ich meine eigenen gemacht.

Vielleicht wird es hier jemandem dienen.

Fügen Sie einfach die CDN-Version zu den Ressourcen von jsFiddle hinzu:

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

Beispiel hier: https://jsfiddle.net/Brutac/e5nsp2mu/

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

Karim Ayachi
quelle
0

Ich könnte zu spät zur Party kommen, wollte aber nur erwähnen, dass JSfiddle gerade die neue Konsolenfunktion veröffentlicht hat. Schalten Sie es einfach in den Einstellungen ein, wenn es bei Ihnen nicht funktioniert.

Geben Sie hier die Bildbeschreibung ein

Noch in der Beta, aber hey ... keine nervigen Problemumgehungen mehr.

Thielicious
quelle