如何在jsfiddle中获取控制台

Question

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

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

Answer 1

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



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

Answer 2

非常简单..

example

github

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

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

Answer 3

• 点击 JavaScript
旁边的箭头
• 并作为框架和扩展，选择无库（纯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扩展的选项，我不想添加外部链接/库，但还有另一个简单解决方案。

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

Answer 6

供以后参考：答案中的jsfiddle-console正是我在JavaScript课上教书时需要的。但是我发现它太局限了，无法在这种情况下实际使用。所以我做了自己的。

也许它将在这里为任何人服务。

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

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

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

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

Answer 7

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

因此，我切换到Codepen，其中an interactive console的作用范围是您的应用程序。

Answer 8

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

1。 Firebug Lite调试器

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

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

2。堆栈片段虚拟控制台

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

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

3。添加jsFiddle控制台

包括来自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。自己动手

这是一个简单的实现，它包装了现有的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])

Answer 9

我可能参加聚会很晚，但只想提及JSfiddle刚刚发布了新的控制台功能。如果您不喜欢它，只需在“设置”中将其打开。

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