JsFiddleでVarを印刷する


200

JavaScriptからJsFiddleの結果画面に何かをどのように印刷しますか?使用できず、使用もできませdocument.write()print

何を使うべきですか?


3
この例を確認してください。jsfiddle.net/jadiagaurang/m58Rn
Gaurang Jadia 2013年

@GaurangJadia便利です。答えとして追加する必要があります(唯一の問題はconsole.log()、カスタム関数とは異なる引数を受け入れることです)。
IQAndreas 2014年

これは...本質的にconsole.log()が必要です
エヴァンキャロル


今日でjsfiddleのdocument.write()の使用ができます
ルベン・

回答:


499

console.log()JSFiddle からの出力を表示できるようにするには、左側のパネルの[ External Resources]に移動し、Firebugの次のリンクを追加します。

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

firebug-lite-debug.jsを追加した後の結果の例


10
すばらしい答え。基本的に、出力ペインを2つのペインに分割します。
ジャック

2
まさに私が探していたもの!
Pratyush 2014

44
JSFiddleがデフォルトでこれを実行するか、少なくともワンクリックで有効にするための非常に明白なチェックボックスが必要です。
リリーフィンリー2015年

5
コンソールは、コードを初めて実行した後にのみ表示されます。素晴らしい答えです!
Peter Piper

4
Chromeにこのようなものはありますか?実際、JSFiddleはそのままの状態でこのようなものをサポートするはずです。それはかなり役に立ちます。
Harshay Buradkar

67

このためのテンプレートがあります。これが私が使用するコードです:

HTML

<pre id="output"></pre>

JavaScript

function out()
{
    var args = Array.prototype.slice.call(arguments, 0);
    document.getElementById('output').innerHTML += args.join(" ") + "\n";
}

使用例(JavaScript)

out("Hello world!");
out("Your lottery numbers are:", Math.random(), 999, Math.PI);
out("Today is", new Date());

そして、オブジェクトをプリティプリントするには... out(JSON.stringify(myObject、null、2));
Andrew Lank 2014年

これはエスケープされていない「<」または「>」文字に関する問題があり、引数の値が<undefined>の場合もbarfすることに注意してください。これはユースケースの問題ではないかもしれませんが、console.log()の呼び出しを置き換えるときに注意する必要があります。
Steve Hollasch、2015年

改善されたバージョン:innerText代わりにinnerHTMLを使用して、ログを元のコンソールに送信しますfunction newLog(oldLog) { return function() { var args = Array.prototype.slice.call(arguments, 0); document.getElementById('console-log').innerText += args.join(" ") + "\n"; oldLog.apply(this, args) } } console.log = newLog(console.log) console.error = newLog(console.error) 。JSFiddleの例
oliverpool

どういうわけか、これはjsfiddleで試しても何もわかりません。:(
スマ

@Sumaええと、JavaScriptエラーの可能性があります。私のマシンでは問題なく動作しますが、別のバージョンを使用している可能性があります。デバッグコンソールを開いてエラーを探してください(そうするときは、左上隅の[ 実行 ]ボタンをクリックしてください)
IQAndreas

39

試してください:

document.getElementById('element').innerHTML = ...;

フィドル:http : //jsfiddle.net/HKhw8/


2
古い情報を単に置き換えるのではなく、document.getElementById('element').innerHTML += [stuff here] + "<br/>";複数行にしてページに情報を追加する場合に使用できます。
IQAndreas 14

27

あなたがすることをしないかもしれませんが、あなたはタイプすることができます

console.log(string)

そして、ブラウザのコンソールに文字列を出力します。ChromeでCTRL+ + SHIFT+ Jを押してコンソールを開きます。


3
または、コンソールを別のウィンドウにフローティングするのではなく、ページの下部にドッキングする場合はCTRL+ SHIFT+ を使用できKます。
IQAndreas 2014


7

jsfiddleは最初からそれを行うことができます。Javascrpt-> Frameworks&extensions-> Jquery(edge)に移動し、Firebug liteチェックボックスをチェックするだけです


しかし、私はこれで構文の強調表示を緩めています:(
Chintan Pathak


4

ES6では、トリックは

function say(...args)
{ 
    document.querySelector('#out').innerHTML += args.join("</br>");
}
say("hi","john");

追加のみ

 <span id="out"></span>

HTMLで



0

一部の人に役立つかもしれない何かを追加するだけです...

上記のようにデバッガコンソールを追加すると、次のコマンドを実行してスコープにアクセスできます。

scope = angular.element(document.querySelector( '[ng-controller = MyCtrl]'))。scope();

console.log、alert()などよりもスコープの検査が直接簡単だと思います。


使用例はありますか、私は従いません。
wide_eyed_pupil

なぜAngularの答えで答えたのかわかりません。間違ったスレッドだと思います。
Neph

0

JSfiddleを使用している場合は、このライブラリを使用できます:https : //github.com/IonicaBizau/console.js

ライブラリのrawgitをjsfiddleリソースに追加します。 https://cdn.rawgit.com/IonicaBizau/console.js/0ee8fcc4ea802247c5a7a8e3c6530ede8ade308b/lib/console.min.js

次に、これをHTMLに追加します。
<pre class="console"></pre>

JSでコンソールを初期化します。
ConsoleJS.init({selector: "pre.console"});

使用例:jsfiddleで確認してください

ConsoleJS.init({selector: "pre.console"});

let b;

console.log('hello world');
console.log([{'a':10,'b':44}]);
console.log(typeof [1,2,3,4]);
console.log(50 +67);
console.log(b);

-4

alert()関数を使用します。

alert(variable name);
alert("Hello World");

1
警告は決して良いデバッグツールではありません-オブジェクトを表示しない、コードの動作を中断するなど
Muers
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.