如何在jsfiddle中获取控制台

Question

如何让控制台在JSfiddle.com上显示小提琴？

我最近看到一个把控制台嵌入小提琴的小提琴，任何人都知道如何做到这一点？

Answer 1

1. 展开JavaScript面板
2. 选择jQuery Edge
3. 选择Firebug Lite。

哪个应该在结果选项卡的底部添加内联控制台

Answer 2

非常简单的..

example

github

只需将以下URL添加到jsfiddle中的External Resources，您将在结果屏幕中看到console.log和console.error。

https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js

Answer 3

• 单击JavaScript旁边的箭头
• 并且作为FRAMEWORKS＆EXTENSIONS选择No-Library（Pure JS）
• 将你的console.log('foo');粘贴在JS盒子里
• 在资源下添加https://rawgit.com/eu81273/jsfiddle-console/master/console.js 或：在资源下添加https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
• 并运行您的脚本点击播放按钮

Answer 4

工作得很好...... here

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

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

Answer 5

我找不到在JavaScript gear选项中选择Firebug扩展的任何选项，我不想添加外部链接/库，但还有另一个简单的解决方案。

You can use your browser's built in console

Answer 6

上述解决方案都不适用于我，因为我需要一个交互式控制台，以便在测试Vue.js中的反应性时能够动态设置变量。

所以我切换到Codepen，它有一个an interactive console作用于你的应用程序。

Answer 7

有几种方法可以在任何网页中嵌入虚拟控制台......

1. Firebug Lite Debugger

包括Firebug（jsFiddle Demo）的以下脚本：

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

2. Stack Snippets Virtual Console

包括/u/canon（Stack Snippets）中使用的jsFiddle Demo的以下脚本：

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

3. Add jsFiddle Console

包括eu81273的以下脚本，通过raw.githack.com *（jsFiddle Demo）提供：

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

*注意：rawgit.com将于2019年10月达到生命终结，因此之前答案中的链接将很快落日。您可以使用任何上述脚本和相应的静态文件托管，例如raw.githack，它将使用适当的mime类型从github提供.js文件。

4. Roll You Own

这是一个简单的实现，包装现有的console.log调用，然后使用prettified转出arguments document.write：

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