如何在jsfiddle中获取控制台

Question

如何让控制台显示在 JSfiddle.com 的 fiddle 中？

我最近看到一个 fiddle 将控制台嵌入 fiddle，有人知道如何做到这一点吗？

Answer 1

工作正常...here

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

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

Answer 2

展开 JavaScript 面板
Select jQuery 边
Select Firebug 精简版。

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

Answer 3

很简单..

example

github

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

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

Answer 4

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

您可以使用浏览器的内置控制台

Answer 5

单击 JavaScript
并作为框架和扩展 select 无库（纯 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 6

None 以上解决方案对我有用，因为我需要一个 交互式控制台 以便能够在 [=20= 中测试反应性时动态设置变量].

所以我切换到 Codepen, which has a an interactive console 范围到您的应用程序。

Answer 7

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

1。 Firebug 精简版调试器 ^Demo

包含来自 Firebug Lite, served via raw.githack.com 的以下脚本：

https://rawcdn.githack.com/firebug/firebug-lite/firebug1.5/build/firebug-lite-debug.js

2。堆栈片段虚拟控制台 ^Demo

包括来自 /u/canon, used in Stack Snippets 的以下脚本：

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

3。添加 jsFiddle 控制台 ^Demo

包括来自 eu81273, served via raw.githack.com 的以下脚本：

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

4。滚你自己的

这是一个简单的实现，它包装了现有的 console.log 调用，然后使用 document.write:

转储了 prettified arguments

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

进一步阅读

Print Var in JsFiddle

Answer 8

供将来参考：answer 中的 jsfiddle-console 正是我在 JavaScript 上教授 class 时所需要的。但是我发现它在这种情况下没有任何实际用途。所以我自己做了。

也许它会为这里的任何人服务。

只需将 CDN 版本添加到 jsFiddle 的资源中即可：

https://unpkg.com/html-console-output

此处示例：https://jsfiddle.net/Brutac/e5nsp2mu/

GitHub: https://github.com/karimayachi/html-console-output

Answer 9

我可能来晚了，但只想提一下 JSfiddle 刚刚发布了新的控制台功能。如果它对您不起作用，请在“设置”中将其打开。

仍处于测试阶段，但是嘿......没有更多烦人的解决方法。

如何在jsfiddle中获取控制台

How to get console inside jsfiddle

javascript

console

jsfiddle

您可以使用浏览器的内置控制台

1。 Firebug 精简版调试器 Demo

2。堆栈片段虚拟控制台 Demo

3。添加 jsFiddle 控制台 Demo

4。滚你自己的

进一步阅读

1。 Firebug 精简版调试器 ^Demo

2。堆栈片段虚拟控制台 ^Demo

3。添加 jsFiddle 控制台 ^Demo