如何在JSFiddle中显示控制台

Question

我怎样在 jsfiddle.net 上显示用于调试 JavaScript 的控制台？我只看到一个结果选项卡。当尝试执行 console.log('test'); 时，只有一个空白的结果选项卡出现。

这个网站上是否有控制台面板？

- MarvHock

---

我不这样认为。打开你的浏览器控制台。 - Felix Kling

在jsfiddle的页面本身中没有控制台面板。然而，您在jsfiddle中使用的console.log()会被写入您的浏览器控制台。 - ionizer

@ionizer 当使用Firebug时，会出现这种情况。 - mplungjan

可能是[如何在jsfiddle中获取控制台]的重复问题(https://dev59.com/jlkT5IYBdhLWcg3wD7Zb)。 - Evan Carroll

JSfiddle终于推出了自己的控制台。只需转到“设置>控制台”进行激活。虽然仍处于测试阶段，但终于不再需要烦人的解决方法了。 - Thielicious

Answer 1

通常通过按F12或在结果窗格上使用检查来操作。

或者，将

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

添加到左侧的资源中，如此处所示

for (var i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}

console.log({
    foo: 'bar',
    baz: function() {}
});
console.log([1, 2, 3]);
console.log(window.alert);

throw new Error('This is error log..');

<script src="https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js"></script>

旧答案

如果你想要“Stacksnippet Console”类型的控制台，直到最近你可以选择jQuery并打开Firebug，它会在结果区域显示控制台消息：

- mplungjan

---

截至2020年，这似乎无法正常工作。我找到了一个fiddle，可以在不显示控制台的情况下使用——我不知道它是如何工作的。 - Álvaro González

@ÁlvaroGonzález 这里有一个新增的js文件：https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js - mplungjan

Answer 2

-- 最新的简单JSFiddle解决方案 --

JSFiddle现在拥有自己的beta设置来显示控制台：

它出现在结果面板的底部：

- allenski

Answer 3

你可以通过右键点击并选择“检查元素”打开它，或者你可以使用F12作为快捷键来打开控制台。

- Chathula Sampath Perera

Answer 4

您可以使用下面的包将控制台输出以“检查样式”的方式重定向到HTML窗格。

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

如果您还有普通的HTML输出，可以使用CSS将其覆盖在控制台上或使其固定在顶部或底部。

这里是一个基本示例（没有CSS）：https://jsfiddle.net/Brutac/e5nsp2mu/

要在jsFiddle中运行它，只需将CDN版本（下面的URL）添加到资源中（参见示例）。

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

- Karim Ayachi

Answer 5

你可以通过以下方式使用浏览器控制台：

右键点击 > 检查元素 > 控制台

- Shazvan Hanif

---

这不是对问题的回答。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要问者澄清的答案。 - 来自审核 - Michel

@Michel 这个答案和上面的“按F12/右键单击”答案一样好。 - mplungjan

Answer 6

F12键打开调试器视图，选择控制台选项卡可以查看日志。您可以按所需筛选警告/信息/错误/全部

- Suhani Aneja

Answer 7

（在Chrome上测试）
1- 在JS窗格上编写一些简单的JS代码。例如> console.log("hello");
2- 点击“运行”。
3- 在“结果”窗格上，右键单击并选择“检查”。
4- 转到控制台。
5- 确保过滤您的结果。（请参见下面的图片）。
不要点击“更新”，以保持干净的控制台。每次想要测试新代码时，只需点击“运行”或使用快捷键：Ctrl + Enter。

- jet2016