web-dev-qa-db-ja.com

JSFiddleの「結果」ウィンドウに結果を出力するにはどうすればよいですか？

console.log()を使用してみましたが、出力を表示するには、開発者ウィンドウをchrome）で開く必要があります。Alert()はポップアップに書き込みますボックス。JSFiddleの結果ウィンドウ（右下のペイン）に出力したいのですが、誰か教えてもらえますか？

JajaDrinkerによる回答のビジュアルで更新されました-これに感謝します。

enter image description here

javascriptconsolejsfiddle
15
davidkelleher

これをHTMLセクションに追加します。

<div id="console-log"></div>

これをJavaScriptセクションに追加します。

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

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

必要に応じて、これをCSSに追加して、よりユーザーフレンドリーにします。

.console-line
{
    font-family: monospace;
    margin: 2px;
}

ここの例 を見ることができます。

23
JajaDrinker

これは目立たない解決策なので、HTMLを変更する必要はありません。 preタグを使用しましたが、任意のタグを使用できます。

console = {
    _createConsole : function() {
        var pre = document.createElement('pre');
        pre.setAttribute('id', 'console');
        document.body.insertBefore(pre, document.body.firstChild);
        return pre;
    },
    log: function (message) {
        var pre = document.getElementById("console") || console._createConsole();
        pre.textContent += ['>', message, '\n'].join(' ');
    }
};
  • サンプル JSFiddle CSSスタイル付き。
  • これは バージョン で、より大きなプロジェクトの外部jsモジュールとしてバンドルできます。
11
Pete

私のやり方は、外部スクリプトとして https://getfirebug.com/firebug-lite-debug.js を追加することです。

enter image description here

9
Bill H

同じ種類の目立たない機能を保持しながら、さらに通常のコンソールのコピーを保存してログに記録する、Peteのバージョンのフォークを作成しました。

(function() {
    // Store a copy of the old console, but don't junk up the
    // global namespace with it either. This allows console
    // logging in both places.
    var oldConsole = console;

    // Use a pre-existing #console element or create a new one.
    var newConsole = document.getElementById("console") || (function() {
        var pre = document.createElement('pre');
        pre.setAttribute('id', 'console');
        document.body.insertBefore(pre, document.body.firstChild);
        return pre;
    })();

    console = {
        log: function (message) {
            var message = ['>', message, '\n'].join(' ');

            // Log to both consoles...
            oldConsole.log(message);
            newConsole.textContent += message;
        }
    };
})();

console.log("This is an unobtrusive version!");
console.log("Hello World!");
console.log("Test");
console.log("Test");
console.log("Test");
console.log("Test");
console.log("Test");
console.log("Make it scrollable!");

ここでそれの動作バージョンを見ることができます： http://jsfiddle.net/Lanlost/7n6jka2q/

1
Brent Rittenhouse