Как получить консоль внутри jsfiddle

Как я могу заставить консоль отображаться в скрипке на JSfiddle.com?

Недавно я видел скрипку, в которую встроена консоль, кто-нибудь знает, как это можно сделать?

1. Разверните панель JavaScript
2. Выберите jQuery Edge
3. Выберите Firebug Lite .

Что должно добавить встроенную консоль в нижнюю часть вкладки результатов

довольно простой ..

пример

github

Просто добавьте следующий URL-адрес во внешние ресурсы в jsfiddle, и вы увидите console.log и console.error на экране результатов.

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

• щелкните стрелку рядом с JavaScript
• и в качестве РАМКИ И РАСШИРЕНИЯ выберите Безлибарий (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
• и запустите свой скрипт, нажав эту кнопку Play

Я не смог найти ни одной опции для выбора расширения Firebug в опции передач JavaScript, и я не хотел добавлять внешние ссылки / библиотеки, но есть еще одно простое решение.

Вы можете использовать встроенную консоль вашего браузера

отлично работает ... здесь

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

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

Ни одно из вышеперечисленных решений у меня не сработало, поскольку мне нужна была интерактивная консоль, чтобы иметь возможность динамически устанавливать переменную при тестировании реактивности в Vue.js.

Поэтому я переключился на Codepen , в котором есть интерактивная консоль, привязанная к вашему приложению.

Есть несколько способов встроить виртуальную консоль в любую веб-страницу ...

1. ^Демо- версия отладчика Firebug Lite

Включите следующий скрипт из Firebug Lite , обслуживаемый через raw.githack.com :

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

2. ^{Демонстрация} виртуальной консоли Stack Snippets

Включите следующий скрипт из / u / canon , используемый в Stack Snippets :

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

3. Добавить консоли jsFiddle ^Demo

Включите следующий сценарий из 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])

Дальнейшее чтение

• Распечатать Var в JsFiddle

Для справки в будущем: jsfiddle-console из ответа - именно то, что мне нужно, когда я преподавал класс по JavaScript. Однако я обнаружил, что он слишком ограничен, чтобы иметь какое-либо практическое применение в данной ситуации. Так что я сделал свой собственный.

Может, здесь кому-нибудь пригодится.

Просто добавьте CDN-версию в ресурсы jsFiddle:

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

Пример здесь: https://jsfiddle.net/Brutac/e5nsp2mu/

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

Я мог опоздать на вечеринку, но просто хотел упомянуть, что JSfiddle только что выпустил новую функцию консоли. Просто включите его в настройках, если он вам не подходит.

Все еще в бета-версии, но эй ... больше никаких раздражающих обходных путей.