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

200

Как мне напечатать что-то на экране результатов в JsFiddle из моего JavaScript. Я не могу использовать document.write(), это не позволяет, ни print.

Что я должен использовать?

aritroper
источник
3
Проверьте этот пример. jsfiddle.net/jadiagaurang/m58Rn
Гауранг Джадия
@GaurangJadia Это удобно, вы должны добавить его как ответ (единственная проблема - console.log()принимать аргументы иначе, чем ваша пользовательская функция).
IQAndreas
По сути, это необходимо для console.log () ...
Эван Кэрролл,
1
Возможный дубликат Как получить консоль внутри jsfiddle
Эван Кэрролл
В настоящее время jsfiddle позволяет использовать document.write ()
Рубен

Ответы:

499

Чтобы увидеть вывод из console.log()JSFiddle, перейдите в раздел Внешние ресурсы на левой панели и добавьте следующую ссылку для Firebug:

https://getfirebug.com/firebug-lite-debug.js

Пример результата после добавления firebug-lite-debug.js

davidkelleher
источник
10
Сказочный ответ. В основном разбивает панель вывода на две панели.
Джек,
2
Именно то, что я искал!
Пратюш
44
Я бы хотел, чтобы JSFiddle делал это по умолчанию или хотя бы имел очень очевидный флажок, чтобы включить его одним щелчком мыши.
Лили Финли
5
консоль появляется только после первого запуска кода! отличный ответ кстати!
Питер Пайпер
4
Есть ли что-нибудь подобное для Chrome? На самом деле JSFiddle должен поддерживать что-то подобное из коробки, это было бы очень полезно.
Харшай Бурадкар
67

У меня есть шаблон для этой цели ; вот код, который я использую:

HTML

<pre id="output"></pre>

JavaScript

function out()
{
    var args = Array.prototype.slice.call(arguments, 0);
    document.getElementById('output').innerHTML += args.join(" ") + "\n";
}

Пример использования (JavaScript)

out("Hello world!");
out("Your lottery numbers are:", Math.random(), 999, Math.PI);
out("Today is", new Date());
IQAndreas
источник
И для печати объектов печати ... out (JSON.stringify (myObject, null, 2));
Эндрю Ланк
Обратите внимание, что у этого будут проблемы с неэкранированными символами «<» или «>», и что он также будет раздражен, когда значения аргумента <undefined>. Это может быть не проблема для вашего варианта использования, но что-то, что нужно знать при замене вызовов console.log ().
Стив Холлаш
Улучшенная версия: использует innerTextвместо innerHTMLи отправляет журнал на оригинальную консоль: function newLog(oldLog) { return function() { var args = Array.prototype.slice.call(arguments, 0); document.getElementById('console-log').innerText += args.join(" ") + "\n"; oldLog.apply(this, args) } } console.log = newLog(console.log) console.error = newLog(console.error) пример
JSFiddle
Каким-то образом это ничего не показывает мне при попытке в jsfiddle. :(
Сума
@ Сума Хм, может быть ошибка JavaScript. Он отлично работает на моей машине, но вы можете использовать другую версию. Попробуйте открыть консоль отладки и найдите ошибки (при этом обязательно нажмите кнопку « Выполнить» в верхнем левом углу)
IQAndreas,
39

Пытаться:

document.getElementById('element').innerHTML = ...;

Скрипка: http://jsfiddle.net/HKhw8/

Пламя Ловушка
источник
2
Вы можете использовать, document.getElementById('element').innerHTML += [stuff here] + "<br/>";если хотите иметь несколько строк и добавлять информацию на страницу, вместо того, чтобы просто заменить старую информацию.
IQAndreas
27

Может не делать то, что вы делаете, но вы можете напечатать

console.log(string)

И он напечатает строку в консоли вашего браузера . В хромированной толчке CTRL+ SHIFT+ , Jчтобы открыть консоль.

Euphe
источник
3
Или вы можете использовать CTRL+ SHIFT+, Kесли хотите, чтобы консоль была закреплена внизу страницы, вместо того, чтобы перемещаться в отдельном окне.
IQAndreas
8

Вы можете сделать это ---> http://jsfiddle.net/chY5y/

$('body').append(yourVariable); 
Мухаммед Адиль
источник
1
Хм, не работает ... как бы я распечатал простой текст вместе с переменной
aritroper
7

Теперь jsfiddle может сделать это с нуля. Просто зайдите в Javascrpt -> Фреймворки и расширения -> Jquery (край) и установите флажок Firebug lite

vkabachenko
источник
Но я
теряю
5

document.body.innerHTML = "Ваши данные";

Игорь Ващук
источник
А еще лучше сделать +, чтобы добавить. Т.е.:document.body.innerHTML += "Your data" + "<br/>"; document.body.innerHTML += "Even more data" + "<br/>";
Михаил Златковский - Microsoft,
4

С трюками ES6 можно было бы

function say(...args)
{ 
    document.querySelector('#out').innerHTML += args.join("</br>");
}
say("hi","john");

Добавить только

 <span id="out"></span>

в HTML

JohnPan
источник
0

Просто чтобы добавить что-то, что может быть полезно для некоторых людей ....

Если вы добавите консоль отладчика, как показано выше, вы можете получить доступ к области, выполнив это:

scope = angular.element (document.querySelector ('[ng-controller = MyCtrl]')). scope ();

Я считаю, что проверять область видимости проще, чем console.log, alert () и т. Д.

Неф
источник
у вас есть пример использования, я не следую.
wide_eyed_pupil
Я понятия не имею, почему я ответил с угловым ответом, я думаю, что это неверная тема.
Неф
0

Если вы используете JSfiddle, вы можете использовать эту библиотеку: https://github.com/IonicaBizau/console.js

Добавьте файл lib к своим ресурсам jsfiddle: https://cdn.rawgit.com/IonicaBizau/console.js/0ee8fcc4ea802247c5a7a8e3c6530ede8ade308b/lib/console.min.js

Тогда вы можете просто добавить это в HTML:
<pre class="console"></pre>

Инициализируйте консоль в вашем JS:
ConsoleJS.init({selector: "pre.console"});

Пример использования: посмотрите на jsfiddle

ConsoleJS.init({selector: "pre.console"});

let b;

console.log('hello world');
console.log([{'a':10,'b':44}]);
console.log(typeof [1,2,3,4]);
console.log(50 +67);
console.log(b);
Эммануэль Н.К.
источник
-4

Используйте alert()функцию:

alert(variable name);
alert("Hello World");
Ашутош Джа
источник
1
alert никогда не является хорошим средством отладки - не показывает объекты, прерывает поведение кода и т. д.
Muers