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

104

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

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

Адам Бьюкенен Смит
источник
2
Есть ли шанс, что скрипка только что сделала что-то подобное? jsfiddle.net/FL4XL
JonSG
3
@VtoCorleone, это то, что я хотел jsfiddle.net/c42vd3m9/1 CodeBroJohn ответил на это. Супер полезно
Адам Бьюкенен Смит
1
Я голосую за то, чтобы закрыть этот вопрос как не по теме, потому что он касается веб-службы
Эван Кэрролл,
1
@EvanCarroll JS Fiddle - это программный инструмент, обычно используемый программистами, поэтому он по теме на этом сайте. Ref. справочный центр .
Rubén
1
Этот вопрос недостаточно ясен, когда я искал это, мне просто нужно было решение JavaScript, а не конкретная консоль библиотеки с использованием jQuery. Это неплохая вещь; однако, возможно, включите дополнительную информацию, например ссылку на jsfiddle на вопрос.
Dalton

Ответы:

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

Пример настроек

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

Пример вывода

CodeBroJohn
источник
19
следует просто указать, что вам нужно настроить javascript для использования библиотеки jQuery edge или подмножества jQuery, чтобы увидеть параметр firebug lite, иначе он не появится сразу.
Tope
4
Ответ ниже выглядит лучшим решением, если вы не хотите использовать JQuery.
Роберт
Это решение требует, чтобы вы использовали jQuery, а не ванильный JavaScript.
Dalton
95

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

пример

github

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

https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js
user1855278
источник
я искал это, и это работает. Хотя для просмотра графа объекта в журнале вместо [object Object] просто нажмите F12 и посмотрите логи в консоли браузера.
cirovladimir
1
здорово! хотя он все еще печатает уродливый [объект Object] и печатает три точки для вложенных объектов. Тем не менее в некоторых случаях это очень помогает. Но сейчас я использую консоль веб-браузера.
cirovladimir
это верно только для пустого HTML (только javascript)
ng10
32
  • щелкните стрелку рядом с 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

player0
источник
3
GIF действительно полезно.
AlexMelw
1
@Ruben, за исключением того, что этот ответ появился до того, как проголосовал лучший, поэтому заслуживает похвалы! + гифка действительно помогает !!
Anshuman Manral
15

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

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

Консоль Dev Tools

Амрит Гаутам
источник
1
Я удивлен, увидев, что за этот ответ проголосовали против. Ответ кажется довольно реалистичным, простым и неизбыточным. Любое объяснение ?? По крайней мере, я пытаюсь предложить другие альтернативы и возможные решения.
Амрит Гаутам
1
Мне очень жаль, что голос против вас расстроил. Голос против не имеет ничего общего с вашим методом - это потому, что это не ответ на вопрос. Это предложение альтернативы, и его лучше было бы поместить в качестве комментария к вопросу OP. Я не могу удалить отрицательный голос, если вы не обновите ответ, и я бы удалил его только в том случае, если обновление сделало это ответом на вопрос или предоставило разумный набор причин, по которым этот метод является жизнеспособным вариантом выше того, о чем просил OP.
Уильям Паттон
Используя встроенную консоль браузера, я могу видеть результаты того, console.log()что вы демонстрируете, но я все еще не могу взаимодействовать с переменными в jsfiddle. Есть ли способ это сделать?
krubo
2
Голосовать за, потому что я тоже не вижу возможности для расширения firebug, самое простое решение - просто нажать 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")
Фернандо
источник
1
Спасибо за ваш ответ, ваш ответ буквально отвечает на то, что я спрашивал, но я не понял свой вопрос, поэтому я дам вам плюс 1, вот ссылка на скрипку, которая показывает, о чем я говорил jsfiddle.net / c42vd3m9 / 1
Адам Бьюкенен Смит,
3

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

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

CodePen Пример

Мудо
источник
Я также заметил, что не могу взаимодействовать с DOM с помощью jQuery и собственной консоли браузера в Js Fiddle. С CodePen я смог открыть собственную консоль и выбрать свои html-элементы с помощью селекторов jQuery.
nflauria
3

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

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

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

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

Firebug

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

jsFiddle Консоль

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

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

KyleMit
источник
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

Карим Аячи
источник
0

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

введите описание изображения здесь

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

Thielicious
источник