如何在jsfiddle中获取控制台

104

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

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

javascript console jsfiddle

— 亚当·布坎南·史密斯
source

2

小提琴只是做了这样的事情吗？jsfiddle.net/FL4XL

— JonSG '16

3

@VtoCorleone这就是我想要的jsfiddle.net/c42vd3m9/1 CodeBroJohn回答了它。超级有用

— 亚当·布坎南·史密斯

1

我投票结束这个问题是因为主题无关，因为这与Web服务有关

— Evan Carroll

1

@EvanCarroll JS Fiddle是程序员常用的软件工具，因此它是此网站上的主题。参考帮助中心。

— 鲁本

1

当我搜索此问题时，这个问题还不够清楚，我只想要一个JavaScript解决方案，而不是使用jQuery的特定库控制台。这不是一件坏事; 但是，也许包括更多信息，例如您对问题的jsfiddle参考。

— 道尔顿

74

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

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

— 约翰
source

19

它只应包含您需要设置JavaScript以使用jQuery边缘库或jQuery子集才能看到firebug lite选项的信息，否则它不会轻易显示。

— 范围Tope

4

如果您不想使用JQuery，则下面的答案似乎是一个更好的解决方案。

— 罗伯特

此解决方案要求您使用jQuery，而不是原始JavaScript。

— 道尔顿

95

很简单的一个..

例

的github

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

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

— 用户名
source

我一直在寻找这个，而这确实起作用。尽管要查看日志中的对象图，但可以按[F12]而不是[object Object]并在浏览器控制台中查看日志。

— cirovladimir

1

大！尽管它仍在打印难看的[object Object]，并且为嵌套对象打印三个点。尽管如此，它在某些情况下还是很有帮助的。我现在正在使用网络浏览器控制台。

— cirovladimir

这仅适用于空HTML（仅适用于JavaScript）

— ng10

32

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

— 玩家0
source

3

该GIF是真的很有帮助。

— AlexMelw

1

@Ruben，除了此答案出现在最高投票者之前，因此值得称赞！+ gif确实有帮助！！

— Anshuman Manral，

15

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

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

— 阿姆里特·豪塔姆（Amrit Gautam）
source

1

我很惊讶地看到这个答案被否决了。答案似乎很现实，简单且非多余。任何解释吗？Atleast，我正在尝试建议其他替代方案和可能的解决方案。

— 阿姆里特·豪塔姆

1

不好意思，您的投票令人沮丧。Downvote与您的方法无关—因为这不是问题的答案。这是一个替代方案的建议，最好将其作为对OP问题的评论。除非您更新答案，否则我无法删除降票投票，只有在更新使答案成为问题答案或提供合理的理由说明此方法在OP要求之外是可行的选择的情况下，我才会删除它。

— 威廉·帕顿

使用浏览器的内置控制台，您可以看到console.log()演示的结果，但是仍然无法与jsfiddle中的变量进行交互。有什么办法吗？

— krubo

2

赞成，因为我也看不到萤火虫扩展程序的选项，所以最简单的解决方案是按F12

— GabrielMSC

1

@AnshumanManral我不关心它将在何时何地出现，直到解决方案起作用为止。我没有任何理由拒绝投票！

— 阿姆里特·豪塔姆

14

工作正常... 在这里

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

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

— 费尔南多
source

1

谢谢您的回答，您的回答从字面上回答了我的问题，但我不清楚我的问题，所以我给您加1，这是一个小提琴的链接，显示了我在说什么jsfiddle.net / c42vd3m9 / 1

— 亚当·布坎南·史密斯

3

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

因此，我切换到Codepen，它具有一个针对您的应用程序的交互式控制台。

— 武藤
source

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

— nflauria

3

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

1. Firebug Lite调试器^演示

包括Firebug Lite中的以下脚本（通过raw.githack.com提供）：

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

2.堆栈片段虚拟控制台^演示

包括来自/ u / canon的以下脚本（用于堆栈片段）：

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

3.添加jsFiddle控制台^演示

包括来自eu81273的以下脚本，该脚本通过raw.githack.com提供：

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

4.自己动手

这是一个简单的实现，它包装了现有的console.log调用，然后使用以下方法转储了经过修饰的参数document.write：

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

展开摘要

进一步阅读

在JsFiddle中打印Var

— 凯尔·米特
source

1

供将来参考：答案中的jsfiddle-console正是我在JavaScript课上讲授的内容。但是我发现它太局限了，无法在这种情况下实际使用。所以我做了我自己的。

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

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

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

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

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

— 卡里姆A
source

0

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

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

— 恶毒的
source