Як отримати консоль всередині 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
• і як ФРАММИ І РОЗШИРЕННЯ виберіть 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
• і запустіть свій сценарій, натиснувши цю кнопку 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. ^{Демонстрація демонстрації} віртуальної консолі " ^{Сніппети"}

Включіть такий сценарій з / u / canon , який використовується у фрагментах стека :

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

Подальше читання

• Варіант друку у JsFiddle

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

Можливо, тут хтось послужить.

Просто додайте CDN-версію до ресурсів jsFiddle:

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

Приклад тут: https://jsfiddle.net/Brutac/e5nsp2mu/

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

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

Все ще в бета-версії, але ей ... більше не дратівливих обхідних шляхів.