Вывод данных на экран в JsFiddle без document.write()

Быстрый ответ

Вывести значение переменной в JsFiddle можно вот так:

var myVar = 'Здравствуй, JSFiddle!';
console.log(myVar); // Вывод в консоль
document.body.textContent = myVar; // Вывод на веб-страницу

• Использовать console.log() для вывода значения переменной в консоль.
• Чтобы отобразить переменную на веб-странице, используйте document.body.textContent.

Если вам нужны более полные функции для отладки и работы с консолью в JSFiddle, примените Firebug Lite:

• Добавляется как внешний ресурс: https://getfirebug.com/firebug-lite-debug.js
• Это расширение предоставляет возможности для работы с консолью, аналогичные инструментам разработки браузера, прямо в редакторе JSFiddle.

Продвинутые техники вывода значения переменной

Создание HTML-консоли

Как создать поле вывода, которое имитирует консоль, в вашем 'fiddle':

function printToScreen() {
  var pre = document.createElement('pre');
  pre.setAttribute('id', 'myOutput'); // Настройка поля для вывода
  document.body.appendChild(pre);
  
  return function(output) {
    document.getElementById('myOutput').innerHTML += output + '\n'; // И данные выводятся!
  };
}
var display = printToScreen();
display('Секрет жизни — это ' + 42);

Подробнее об этом расскажет наш спикер на видео

Вывод данных через jQuery

Если вы больше склоняетесь к jQuery:

var secretMessage = 'Привет миру от jQuery!';
$('<p>').text(secretMessage).appendTo('body'); // jQuery в действии!

Таким образом, вывод данных происходит изящно и безопасно, обходя document.write().

Подводные камни и устранение проблем

Учтите следующее:

• Риск использования Document.write: Этот метод может удалить весь ваш HTML.
• Проблема невидимого вывода: Если вывод данных не отображается, возможно, стоит проверить стили.
• Перегруз консоли сообщениями: Слишком много логов может затенить суть происходящего в коде.

Визуализация

Представьте, что вывод переменной в JsFiddle подобен заказу фаст-фуда (🍔):

Заказ: `let order = 'Чизбургер!';`

Когда мы передаём заказ, он появляется на консоли:

console.log(order);

И в консоли (🖥️) отображается:

🍔➡️🌅➡️🖥️: "Чизбургер!"

Заказ выполнен! Теперь ваша переменная доступна и готова к использованию.

Обработка нескольких заказов

Если вам нужно вывести несколько переменных или массив, вот так это можно сделать:

var burgerOrders = ['Чизбургер', 'Гамбургер', 'Вегетарианский бургер'];
burgerOrders.forEach(order => console.log(order)); // Все заказы приняты!

Работа с консолью браузера

Консоль браузера — это ваш незаменимый инструмент. В Chrome для её вызова используйте комбинацию ключей CTRL + SHIFT + J.

Полезные материалы

1. Метод log() консоли – Web APIs | MDN — Ведите дневник вашего JavaScript, руководство по использованию консоли.
2. Документация и справка по JSFiddle — Освойте вашего помощника, JSFiddle.
3. Вопросы про JSFiddle на Stack Overflow — Если возникнут проблемы, обращайтесь к сообществу программистов.
4. Вывод данных в JavaScript на W3Schools — Различные способы вывода данных в JavaScript.
5. Стандарт консоли — Фундаментальный документ API консоли, учебник для глубокого анализа рабочих процессов с логами.
6. Отладка в браузере на сайте JavaScript.info — Станьте детективом своего кода! Изучите тонкости отладки через консоль браузера.