web-dev-qa-db-ja.com

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

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

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

javascriptconsolejsfiddle
76
Adam Buchanan Smith
  1. JavaScriptパネルを展開する
  2. SelectjQuery Edge
  3. Firebug Liteを選択します。

Example of Settings

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

Example of Output

69
CodeBroJohn

とてもシンプルなもの。

例

github

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

https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
59
user1855278
  • JavaScriptの横の矢印をクリックします
  • そしてFRAMEWORKS＆EXTENSIONSselectNo-Libary（Pure JS）
  • console.log('foo');をJSボックスに貼り付けます
  • underResourcesaddhttps://rawgit.com/eu81273/jsfiddle-console/master/console.js
    • または：（Resourcesaddhttps://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
  • スクリプトを実行して[再生]ボタンを押します

22
player0

うまく動作します... ここ

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

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

JavaScriptギアオプションでFirebug拡張機能を選択するオプションが見つかりませんでした。外部リンク/ライブラリを追加したくありませんでしたが、別のsimpleソリューション。

ブラウザのビルトインコンソールを使用できます

Dev Tools Console

9
Amrit Gautam

Vue.jsで反応性をテストするときに変数を動的に設定できるインタラクティブコンソールが必要だったため、上記のソリューションはどれも役に立ちませんでした。

そこで私は Codepen に切り替えました。これは インタラクティブコンソール がアプリケーションにスコープされています。

CodePen Example

1
Mudo

Webページ内にvirtual consoleを埋め込む方法はいくつかあります...

1. Firebug Liteデバッガー

Firebug （ jsFiddle Demo ）の次のスクリプトを含めます。

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

firebug

2.スタックスニペット仮想コンソール

/ u/Canon の次のスクリプトを含めます。これは Stack Snippets （- jsFiddle Demo ）で使用されます。

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

Stack Snippets

3. jsFiddle Consoleを追加します

eu8127 の次のスクリプトを含めます- raw.githack.com *（ jsFiddle Demo ）で提供されます：

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

jsFiddle Console

*注： rawgit.com はヒットEnd-Of-Life 2019年10月に、以前の回答のリンクは間もなく廃止されます。適切なMIMEタイプのgithubから.jsファイルを提供するraw.githackなど、適切な静的ファイルホスティングで上記のスクリプトのいずれかを使用できます。

4.自分でロール

以下は、既存のconsole.log呼び出しをラップし、document.writeを使用して prettifiedarguments をダンプする簡単な実装です。

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