logo标签列表

如何在JSFiddle中获取控制台

javascriptconsolejsfiddle
111

如何在JSFiddle.com上显示控制台？

我最近看到一个嵌入了控制台的fiddle，有人知道如何实现吗？

2
有没有可能这个fiddle刚刚做了类似这样的事情？http://jsfiddle.net/FL4XL/ - JonSG
3
@VtoCorleone 这就是我想要的 https://jsfiddle.net/c42vd3m9/1/ CodeBroJohn 给出了答案。非常有用。 - Adam Buchanan Smith
1
我投票关闭此问题，因为它与网络服务无关。 - Evan Carroll
1
@EvanCarroll JS Fiddle是程序员常用的软件工具，因此它在这个网站上是相关主题。参考[help/on-topic]。 - Rubén
1
这个问题不够清晰，当我搜索时，我只想要一个JavaScript解决方案，而不是使用jQuery的特定库控制台。这并不是一件坏事；然而，也许可以包括更多信息，比如你的jsfiddle参考问题。 - user4399002
显示剩余11条评论
9个回答
100

很简单..

示例

GitHub

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

https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
1
我一直在寻找这个功能，现在它终于实现了。如果想要在日志中查看对象图形而不是 [object Object]，只需按 F12 并在浏览器控制台中查看日志即可。 - cirovladimir
1
太好了！虽然它仍然打印出丑陋的[object Object]，并且对于嵌套对象打印三个点。尽管如此，在某些情况下它非常有用。不过我现在正在使用Web浏览器控制台。 - cirovladimir
这仅适用于空HTML（仅JavaScript）。 - ng10
76
  1. 展开JavaScript面板
  2. 选择jQuery Edge
  3. 选择Firebug Lite

设置示例

这将会在结果选项卡底部添加一个内联控制台。

输出示例

21
简单来说，你需要将你的 JavaScript 设置为使用 jQuery 最新版本或其子集才能看到 Firebug Lite 选项，否则它不会立即显示。 - Tope
4
如果您不想使用jQuery，那么下面的答案看起来是一个更好的解决方案。 - Robert
这个解决方案需要你使用jQuery，而不是原生JavaScript。 - user4399002
36
  • 点击那个箭头旁边的JavaScript
  • 在框架和扩展中选择No-Libary (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
  • 点击播放按钮运行您的脚本

5
这个 gif 非常有帮助。 - AlexMelw
2
@Ruben，除了这个回答在得票最高的回答之前出现，因此应该得到荣誉！+ gif 真的很有帮助！！ - Anshuman Manral
21

我找不到在JavaScript工具选项中选择Firebug扩展的选项，也不想添加外部链接或库，但有另一个简单的解决方案。

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

开发工具控制台

1
我很惊讶看到这个答案被踩了。这个答案似乎非常现实、简单而且不重复。有解释吗？至少，我正在尝试提供其他的选择和可能的解决方案。 - Amrit Gautam
1
很抱歉，你对这个踩票感到不满。踩票与你的方法无关——这是因为它不是回答问题的答案。这只是一个替代建议，更适合作为对 OP 问题的评论。除非你更新了答案，否则我无法取消踩票，如果更新使此成为问题的答案或提供了一组合理的原因，说明这种方法比 OP 要求的更可行，我才会将其取消。 - William Patton
2
点赞，因为我也没有看到Firebug扩展选项，最简单的解决方案就是按F12键。 - humans
1
@AnshumanManral 我不关心它何时何地出现，只要解决方案有效即可。我并不认为有任何降低投票的理由！ - Amrit Gautam
1
值得一提的是，进入 jsFiddle 的选项并切换到选项卡视图，这样即使您不使用 HTML 和 CSS 面板，也不会浪费空间。将 CSS 设置为 * { background-color:black}，这样在其他暗色页面上就不会有一个大的白框了。 - Kip
显示剩余2条评论
15

在这里链接可以正常工作。

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

console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};
console.log("Hello Console")
1
谢谢您的回答，您的回答确实回答了我的问题，但我没有表达清楚我的问题，所以我会给您一个加1。这是一个链接，展示了我所说的内容：https://jsfiddle.net/c42vd3m9/1/ - Adam Buchanan Smith
4
我还注意到在 Js Fiddle 中，我无法使用 jQuery 和本地浏览器控制台与 DOM 进行交互。但是在 CodePen 中，我可以打开本地控制台并使用 jQuery 选择器选择我的 HTML 元素。 - nflauria
3

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

1. Firebug Lite调试器 演示

从raw.githack.com获取以下来自Firebug Lite的脚本：

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

firebug

2. Stack Snippets虚拟控制台 演示

从/u/canon获取以下脚本，用于Stack Snippets：

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

Stack Snippets

3. 添加jsFiddle控制台 演示

从raw.githack.com获取以下来自eu81273的脚本：

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

4. 自己动手实现

以下是一个简单的实现，它将包装现有的console.log调用，然后使用 document.write 来输出经过美化处理的参数:

jsFiddle控制台

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

更多阅读

2

供日后参考：答案中的jsfiddle-console正是我在教授JavaScript课程时所需的。然而，我发现它过于有限，无法在这种情况下实际使用。因此，我制作了自己的工具。

也许它会对这里的任何人有所帮助。

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

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

这里有一个示例：https://jsfiddle.net/Brutac/e5nsp2mu/ GitHub页面链接：https://github.com/karimayachi/html-console-output，这是与HTML控制台输出相关的IT技术内容，请您查看。
相当酷。谢谢分享。 - Joe Johnston
0

我可能有点晚了，但是想提一下JSfiddle刚刚发布了新的控制台功能。如果它对你不起作用，只需在设置中打开它即可。

enter image description here

虽然还在测试版，但是...不再有烦人的解决方法了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接