在JsFiddle中打印Var


200

如何从JavaScript将某些内容打印到JsFiddle的结果屏幕中。我不能使用document.write(),也不允许print

我应该怎么用?



@GaurangJadia这很方便,您应该将其添加为答案(唯一的问题是console.log()接受参数的方式与自定义函数不同)。
IQAndreas 2014年

这本质上是对console.log()的需要……
Evan Carroll


如今的jsfiddle允许使用文件撰写的()
鲁本

Answers:


499

为了能够console.log()在JSFiddle中查看输出,请转到左侧面板上的外部资源,并为Firebug添加以下链接:

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

添加firebug-lite-debug.js后的结果示例


10
神话般的答案。基本上将输出窗格分为两个窗格。
2014年

2
正是我想要的!
Pratyush 2014年

44
我希望JSFiddle默认情况下会执行此操作,或者至少有一个非常明显的复选框以一键启用它。
莉莉·芬利

5
只有在您第一次运行代码后,控制台才会显示!不错的答案!
彼得·派珀

4
Chrome是否有类似的东西?实际上,JSFiddle应该开箱即用地支持类似的东西,这将非常有帮助。
Harshay Buradkar,2015年

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>时也会出现问题。对于您的用例而言,这可能不是问题,但是在替换对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

@Suma Hm,可能存在JavaScript错误。它可以在我的机器上正常运行,但是您可能使用了其他版本。尝试打开调试控制台并查找错误(这样做时请确保单击左上角的“运行”按钮)
IQAndreas

39

尝试:

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

小提琴:http : //jsfiddle.net/HKhw8/


2
document.getElementById('element').innerHTML += [stuff here] + "<br/>";如果您希望有多行并将信息添加到页面,则可以使用,而不仅仅是替换旧信息。
IQAndreas 2014年

27

可能不会做您所做的事情,但是您可以键入

console.log(string)

它将字符串打印到浏览器的控制台中。在Chrome浏览器中,按CTRL+ SHIFT+ J打开控制台。


3
或者,如果希望将控制台停靠在页面底部,而不是在单独的窗口中四处移动,则可以使用CTRL+ SHIFT+ K
IQAndreas 2014年


7

现在,jsfiddle可以从头开始。只需转到Javascrpt->框架和扩展-> Jquery(edge)并选中Firebug lite复选框


但是我用这样的语法突出了:(
Chintan Pathak '18


4

使用ES6的技巧可能是

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

仅添加

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

在HTML中



0

只是添加一些可能对某些人有用的东西。

如果添加了如上所示的调试器控制台,则可以通过执行以下操作来访问作用域:

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

我发现直接检查范围比console.log,alert()等容易。


你有用法的例子吗,我不明白。
wide_eyed_pupil

我不知道为什么我用Angular答案回答,我猜是错误的线程。
Neph

0

如果您使用的是JSfiddle,则可以使用以下库:https : //github.com/IonicaBizau/console.js

将lib的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);

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.