Wie bekomme ich eine Konsole in jsfiddle?

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?

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

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

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

• 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

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

funktioniert gut ... hier

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

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

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.

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

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

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

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

• Drucken Sie Var in JsFiddle

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

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.

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