如何在 jsfiddle 中获得控制台

小开

works fine... here

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


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

小开

最佳答案

Expand the JavaScript panel
Select jQuery Edge
Select Firebug Lite.

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

小开

pretty simple one..

example

github

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

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

小开

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 simple solution.

You can use your browser's built in console

小开

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

小开

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

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

小开

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

1. Firebug Lite Debugger ^Demo

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

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

2. Stack Snippets Virtual Console ^Demo

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

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

3. Add jsFiddle Console ^Demo

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

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

4. Roll You Own

Here's a trivial implementation that wraps the existing console.log call and then dumps out the prettified arguments using 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 中获得控制台

You can use your browser's built in console

1. Firebug Lite Debugger Demo

2. Stack Snippets Virtual Console Demo

3. Add jsFiddle Console Demo

4. Roll You Own

Further Reading

1. Firebug Lite Debugger ^Demo

2. Stack Snippets Virtual Console ^Demo

3. Add jsFiddle Console ^Demo