Javascript 如何在jsfiddle中获取控制台

How to get console inside jsfiddle

提问by Adam Buchanan Smith

How can I get the console to show in a fiddle on JSfiddle.com?

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

I recently saw a fiddle that had the console embedded in the fiddle, anyone know how this can be done?

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

采纳答案by CodeBroJohn

1. Expand the JavaScript panel
2. Select jQuery Edge
3. Select Firebug Lite.

1. 展开 JavaScript 面板
2. 选择jQuery Edge
3. 选择Firebug 精简版。

Which should add an inline console to the bottom of the results tab

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

回答by user1855278

pretty simple one..

很简单的一个..

example

例子

github

github

Just add the following URL to External Resources in jsfiddle, you will see console.log and console.error in the result screen.

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

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

回答by player0

• click on that arrow next to JavaScript
• and as FRAMEWORKS & EXTENSIONSselect No-Libary (Pure JS)
• paste your console.log('foo');in JS box
• under Resourcesadd https://rawgit.com/eu81273/jsfiddle-console/master/console.js
  • or: under Resourcesadd https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
• and run your script hitting that Play button

• 单击JavaScript旁边的那个箭头
• 并且作为FRAMEWORKS & EXTENSIONS选择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
• 并运行您的脚本点击播放按钮

回答by Amrit Gautam

I couldn't find any option for selecting the Firebug extension in the JavaScript gear option, and I didn't want to add external links/libraries, but there is another simplesolution.

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

You can use your browser's built in console

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

回答by fernando

works fine... here

工作正常......在这里

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

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

回答by Mudo

None of the above solutions worked for me, since I needed an interactive consoleto be able to dynamically set a variable when testing reactivity in Vue.js.

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

So I switched to Codepen, which has a an interactive consolescoped to your application.

所以我切换到Codepen，它有一个交互式控制台，适用于您的应用程序。

回答by KyleMit

There are several ways to embed a virtual consoleinside of any web page...

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

1. Firebug Lite Debugger ^Demo

1. Firebug Lite 调试器^演示

Include the following script from Firebug Lite, served via raw.githack.com:

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

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

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

2. Stack Snippets Virtual Console ^Demo

2. Stack Snippets 虚拟控制台^演示

Include the following script from /u/canon, used in Stack Snippets:

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

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

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

3. Add jsFiddle Console ^Demo

3.添加jsFiddle Console ^Demo

Include the following script from eu81273, served via raw.githack.com:

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

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

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

4. Roll You Own

4.滚动你自己的

Here's a trivial implementation that wraps the existing console.logcall and then dumps out the prettifiedargumentsusing document.write:

这是一个简单的实现，它包装了现有的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])

Further Reading

进一步阅读

• Print Var in JsFiddle

• 在 JsFiddle 中打印 Var

回答by Karim Ayachi

For future reference: the jsfiddle-console from answer was exactly what I needed when teaching a class on JavaScript. However I found it to be too limited to be of any actual use in this situation. So I made my own.

供将来参考：answer 中的 jsfiddle-console 正是我在教授 JavaScript 类时所需要的。但是我发现它太有限了，在这种情况下无法实际使用。所以我自己做了。

Maybe it will serve anyone here.

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

Just add the CDN-version to the resources of jsFiddle:

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

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

Example here: https://jsfiddle.net/Brutac/e5nsp2mu/

这里的例子：https: //jsfiddle.net/Brutac/e5nsp2mu/

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

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