如何在 jsfiddle 中获取控制台答案

【问题标题】：How to get console inside jsfiddle如何在 jsfiddle 中获取控制台
【发布时间】：2017-01-01 00:28:39
【问题描述】：

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

我最近看到一个小提琴中嵌入了控制台，有人知道这是怎么做到的吗？

【问题讨论】：

小提琴有没有可能做了这样的事情？ jsfiddle.net/FL4XL
@VtoCorleone 这就是我想要的 jsfiddle.net/c42vd3m9/1 CodeBroJohn 回答了它。超级好用
我投票结束这个问题作为离题，因为这是关于网络服务
@EvanCarroll JS Fiddle 是程序员常用的软件工具，所以它在这个网站上成为主题。参考。 help center.
当我搜索这个问题时，这个问题还不够清楚，我只想要一个 JavaScript 解决方案，而不是使用 jQuery 的特定库控制台。这不是一件坏事;但是，可能包含更多信息，例如您对问题的 jsfiddle 引用。

标签： javascript console jsfiddle

【解决方案1】：

很简单的一个..

example

github

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

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

【讨论】：

我一直在寻找这个，这可以完成工作。虽然要在日志中查看对象图，而不是[object Object]，只需按F12即可在浏览器控制台中查看日志。
太棒了！尽管它仍在打印丑陋的 [object Object] 并且它为嵌套对象打印三个点。尽管如此，它在某些情况下还是很有帮助的。不过，我现在正在使用 Web 浏览器控制台。
这仅适用于空 HTML（仅 javascript）

【解决方案2】：

展开 JavaScript 面板
选择 jQuery Edge
选择 Firebug Lite。

应该在结果标签的底部添加一个内联控制台

【讨论】：

应该简单地包括你需要将你的 javascript 设置为使用 jQuery 边缘库或 jQuery 的子集才能看到 firebug lite 选项，否则它不会轻易显示。
如果您不想使用 JQuery，答案 bellow 似乎是一个更好的解决方案。
此解决方案要求您使用 jQuery，而不是原生 JavaScript。

【解决方案3】：

点击 JavaScript 旁边的箭头
作为 FRAMEWORKS & EXTENSIONS 选择 No-Libary (Pure JS)
在JS框中粘贴你的console.log('foo');
在资源下添加https://rawgit.com/eu81273/jsfiddle-console/master/console.js
- 或：在资源下添加https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
然后点击播放按钮运行您的脚本

【讨论】：

gif 真的很有帮助。
@Ruben，除了这个答案出现在投票最高的人之前，所以值得称赞！ + gif 真的很有帮助！！

【解决方案4】：

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

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

【讨论】：

我很惊讶地看到这个答案被否决了。答案似乎非常现实、简单且不多余。有什么解释吗？？至少，我正在尝试提出其他替代方案和可能的解决方案。
很抱歉，downvote 让您感到不安。 Downvote 与您的方法无关 - 这是因为这不是问题的答案。这是对替代方案的建议，最好将其作为对 OP 问题的评论。除非您更新答案，否则我无法删除反对票，并且只有在更新使该答案成为问题的答案或提供了合理的理由说明此方法是高于 OP 要求的可行选项时，我才会将其删除。
赞成，因为我也没有看到 firebug 扩展的选项，最简单的解决方案就是按 F12
@AnshumanManral 我不关心它何时何地会在那里，直到解决方案奏效。不过，我看不出有任何理由投反对票！
值得添加 - 进入 jsFiddle 上的选项并切换到选项卡式视图，因此即使您不使用 HTML 和 CSS 窗格也不会占用空间。将 CSS 设置为 * { background-color:black}，这样您就不会在原本黑暗的页面上出现大白框。

【解决方案5】：

工作正常...here

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

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

【讨论】：

谢谢你的回答，你的回答确实回答了我的问题，但我不清楚我的问题，所以我会给你加 1，这是一个指向小提琴的链接，显示我在说什么jsfiddle.net/c42vd3m9/1

【解决方案6】：

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

所以我切换到了Codepen，它的an interactive console 作用于您的应用程序。

【讨论】：

我还注意到我无法使用 jQuery 和 Js Fiddle 中的本机浏览器控制台与 DOM 交互。使用 CodePen，我能够打开本机控制台并使用 jQuery 选择器选择我的 html 元素。

【解决方案7】：

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

1。 Firebug Lite 调试器 ^Demo

包含来自Firebug Lite 的以下脚本，通过raw.githack.com 提供服务：

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

2。 Stack Snippets 虚拟控制台 ^Demo

包含来自/u/canon 的以下脚本，用于Stack Snippets：

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

3。添加jsFiddle控制台^Demo

包含来自eu81273 的以下脚本，通过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

【讨论】：

【解决方案8】：

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

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

只需将CDN-version添加到jsFiddle的资源中即可：

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

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

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

【讨论】：

很酷。感谢分享。

【解决方案9】：

我可能迟到了，但我只想提一下 JSfiddle 刚刚发布了新的控制台功能。如果它不适合您，只需在“设置”中打开它即可。

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

【讨论】：

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

1。 Firebug Lite 调试器 Demo

2。 Stack Snippets 虚拟控制台 Demo

3。添加jsFiddle控制台Demo

4。滚动你自己

进一步阅读

1。 Firebug Lite 调试器 ^Demo

2。 Stack Snippets 虚拟控制台 ^Demo

3。添加jsFiddle控制台^Demo