jsfiddle内でコンソールを取得する方法

JSfiddle.comのフィドルにコンソールを表示するにはどうすればよいですか？

私は最近、コンソールがフィドルに埋め込まれているフィドルを見ましたが、誰でもこれを行う方法を知っていますか？

1. JavaScriptパネルを展開する
2. jQuery Edgeを選択
3. Firebug Liteを選択します。

結果タブの下部にインラインコンソールを追加する必要があります

かなりシンプルなもの

例

github

jsfiddleの外部リソースに次のURLを追加するだけで、結果画面にconsole.logとconsole.errorが表示されます。

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

• JavaScriptの横にある矢印をクリックします
• FRAMEWORKS＆EXTENSIONSとしてNo-Libary（Pure JS）を選択します
• console.log('foo');JSボックスに貼り付けます
• リソースの下に追加https://rawgit.com/eu81273/jsfiddle-console/master/console.js
  • または：リソースの下に追加https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
• そして、その再生ボタンを押すスクリプトを実行します

JavaScriptギアオプションでFirebug拡張機能を選択するためのオプションが見つからず、外部リンク/ライブラリを追加したくありませんでしたが、別の簡単な解決策があります。

ブラウザの組み込みコンソールを使用できます

うまくいきます... ここ

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

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

Vue.jsで反応性をテストするときに変数を動的に設定できるインタラクティブコンソールが必要だったため、上記の解決策はどれも私にとってはうまくいきませんでした。

そこで、私はアプリケーションにスコープされた対話型コンソールを持つCodepenに切り替えました。

仮想コンソールをWebページ内に埋め込む方法はいくつかあります...

1. Firebug Liteデバッガーの^デモ

raw.githack.comを介して提供される、Firebug Liteの次のスクリプトを含めます。

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

2. Stack Snippets仮想コンソールの^デモ

Stack Snippetsで使用される/ u / canonの次のスクリプトを含めます。

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

3. jsFiddleコンソールの^デモを追加する

raw.githack.comを介して提供されるeu81273の次のスクリプトを含めます。

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

4.あなたが所有するロール

これは、既存のconsole.log呼び出しをラップし、次のようにして事前に設定された 引数をダンプする簡単な実装です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])

参考文献

• JsFiddleでVarを印刷する

今後の参考のために、答えからのjsfiddle-consoleは、JavaScriptでクラスを教えるときに私がまさに必要としていたものでした。ただし、この状況では実際に使用するには制限が多すぎることがわかりました。だから私は自分で作った。

多分それはここで誰にでも役立つでしょう。

jsFiddleのリソースにCDNバージョンを追加するだけです。

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

ここに例：https : //jsfiddle.net/Brutac/e5nsp2mu/

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

私はパーティーに遅れる可能性がありますが、JSfiddleが新しいコンソール機能をリリースしたことを述べたいだけです。機能しない場合は、[設定]でオンにしてください。

まだベータ版ですが、ちょっと…迷惑な回避策はもうありません。