web-dev-qa-db-ja.com

JsFiddleでVarを印刷する

JavaScriptからJsFiddleの結果画面に何かを印刷するにはどうすればよいですか。私はdocument.write()を使用できません。許可しません。printも使用できません。

何を使うべきですか?

195
aritroper

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

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

Example of the result after adding firebug-lite-debug.js

493
davidkelleher

この目的のためのテンプレートを持っています ;ここに私が使用するコードがあります:

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());
64
IQAndreas

試してください:

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

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

39
Flame Trap

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

console.log(string)

そして、文字列をbrowserのコンソールに出力します。クロームプッシュ CTRL + SHIFT + J コンソールを開きます。

27
Euphe

これを行うことができます--->http://jsfiddle.net/chY5y/

$('body').append(yourVariable); 
8
Mohammad Adil

これで、jsfiddleをゼロから実行できます。 Javascript->フレームワークと拡張機能-> Jquery(Edge)に移動し、Firebug liteチェックボックスをオンにします。

7
vkabachenko

document.body.innerHTML = "あなたのデータ";

5
Igor Vaschuk

ES6のトリックは

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

追加のみ

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

hTMLで

4
JohnPan

ここに1つの選択肢があります: http://jsfiddle.net/skibulk/erh7m9og/1/

document.write = function (str) {
    document.body.insertAdjacentHTML("beforeend", str);
}

document.write("¡hola mundo");
3
skibulk

一部の人々に役立つかもしれない何かを追加するために....

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

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

Console.log、alert()などよりも、スコープを直接検査する方が簡単です。

0
Neph

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);
0
Emmanuel N K