如何在jsfiddle中显示控制台

Question

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

是否存在控制台面板？

Answer 1

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

或者添加

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

到左边的资源 here

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，这将在结果窗格中显示控制台消息：

Answer 2

您可以通过右键单击并在该菜单上选择检查元素来打开它，或者您可以使用 f12 作为快捷键打开控制台。

Answer 3

您可以通过

使用浏览器控制台

Rightclick > inspect element > console

Answer 4

F12，打开调试器视图并在控制台选项卡上获取日志。您可以根据需要过滤 warning/info/errors/all

Answer 5

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

Answer 6

您可以使用下面的包以 'inspection style' 方式将控制台输出重定向到 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

Answer 7

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

JSFiddle 现在有自己的用于显示控制台的测试版设置：

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

如何在jsfiddle中显示控制台

How to show console in jsfiddle

javascript

jsfiddle

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