Stampa Var in JsFiddle

200

Come potrei stampare qualcosa sulla schermata dei risultati in JsFiddle dal mio JavaScript. Non posso usarlo document.write(), non lo consente neanche print.

Cosa dovrei usare?

javascript jsfiddle

— aritroper
fonte

3

Dai un'occhiata a questo esempio. jsfiddle.net/jadiagaurang/m58Rn

— Gaurang Jadia

@GaurangJadia È utile, dovresti aggiungerlo come risposta (l'unico problema è console.log()accettare argomenti in modo diverso dalla tua funzione personalizzata).

— IQAndreas

Questo è essenzialmente un bisogno di console.log () ...

— Evan Carroll,

1

Possibile duplicato di Come ottenere console all'interno di jsfiddle

— Evan Carroll il

Oggi jsfiddle consente l'uso di document.write ()

— Rubén il

499

Per poter vedere l'output da console.log()JSFiddle, vai su Risorse esterne nel pannello di sinistra e aggiungi il seguente link per Firebug:

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

Esempio del risultato dopo l'aggiunta di firebug-lite-debug.js

— davidkelleher
fonte

10

Risposta favolosa Suddivide sostanzialmente il riquadro di output in due riquadri.

— Jack,

2

Esattamente quello che stavo cercando!

— Pratyush,

44

Vorrei che JSFiddle lo facesse per impostazione predefinita, o almeno avesse una casella di controllo molto ovvia per abilitarlo con un clic.

— Lily Finley,

5

la console appare solo dopo aver eseguito il codice per la prima volta! ottima risposta a proposito!

— Peter Piper,

4

C'è qualcosa di simile per Chrome? In realtà JSFiddle dovrebbe supportare qualcosa di simile fuori dalla scatola, sarebbe abbastanza utile.

— Harshay Buradkar,

67

Ho un modello per questo scopo ; ecco il codice che uso:

HTML

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

JavaScript

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

Esempio di utilizzo (JavaScript)

out("Hello world!");
out("Your lottery numbers are:", Math.random(), 999, Math.PI);
out("Today is", new Date());

— IQAndreas
fonte

E per stampare oggetti di stampa ... out (JSON.stringify (myObject, null, 2));

— Andrew Lank,

Si noti che ciò avrà problemi con caratteri "<" o ">" senza caratteri di escape e che si noterà anche quando i valori degli argomenti sono <non definiti>. Questo potrebbe non essere un problema per il tuo caso d'uso, ma qualcosa da tenere presente quando si sostituiscono le chiamate a console.log ().

— Steve Hollasch,

Versione migliorata: utilizza innerTextinvece innerHTMLe invia anche il registro alla console originale:

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)

esempio

— JSFiddle

In qualche modo questo non mi mostra nulla quando provo in jsfiddle. :(

— Suma,

@Suma Hm, potrebbe esserci un errore JavaScript. Funziona bene sulla mia macchina, ma potresti usare una versione diversa. Prova ad aprire la console di debug e cerca gli errori (assicurati di premere il pulsante Esegui nell'angolo in alto a sinistra quando lo fai)

— IQAndreas

39

Provare:

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

Fiddle: http://jsfiddle.net/HKhw8/

— Trappola di fiamma
fonte

2

È possibile utilizzare document.getElementById('element').innerHTML += [stuff here] + "<br/>";se si desidera disporre di più righe e aggiungere informazioni alla pagina, anziché semplicemente sostituire le vecchie informazioni.

— IQAndreas,

27

Potrebbe non fare quello che fai, ma puoi digitare

console.log(string)

E stamperà la stringa nella console del tuo browser . In chrome premere CTRL+ SHIFT+ Jper aprire la console.

— Euphe
fonte

3

Oppure puoi usare CTRL+ SHIFT+ Kse vuoi che la console sia ancorata nella parte inferiore della pagina, invece di fluttuare in una finestra separata.

— IQAndreas,

8

Puoi farlo ---> http://jsfiddle.net/chY5y/

$('body').append(yourVariable);

— Mohammad Adil
fonte

1

Hhmmm, non funziona ... come potrei stampare un testo semplice insieme a una variabile

— corretto

7

Ora jsfiddle può farlo da zero. Basta andare su Javascrpt -> Quadri ed estensioni -> Jquery (bordo) e selezionare la casella di controllo Firebug Lite

— vkabachenko
fonte

Ma

— perdo l'

5

document.body.innerHTML = "I tuoi dati";

— Igor Vaschuk
fonte

Meglio ancora, fai un + = da aggiungere. document.body.innerHTML += "Your data" + "<br/>"; document.body.innerHTML += "Even more data" + "<br/>";

— Vale a

4

Con ES6 i trucchi potrebbero essere

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

Aggiungi solo

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

in HTML

— JohnPan
fonte

3

Ecco una alternativa: http://jsfiddle.net/skibulk/erh7m9og/1/

document.write = function (str) {
    document.body.insertAdjacentHTML("beforeend", str);
}

document.write("¡hola mundo");

— skibulk
fonte

0

Solo per aggiungere qualcosa che potrebbe essere utile ad alcune persone ....

Se aggiungi la console di debugger come mostrato sopra, puoi accedere all'ambito eseguendo questo:

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

Trovo che ispezionare l'ambito direttamente sia più semplice di console.log, alert (), ecc.

— Neph
fonte

hai un esempio di utilizzo, non lo seguo.

— wide_eyed_pupil

Non ho idea del motivo per cui ho risposto con una risposta angolare, immagino filo sbagliato.

— Neph,

0

Se stai usando JSfiddle, puoi usare questa libreria: https://github.com/IonicaBizau/console.js

Aggiungi un rawgit della lib alle tue risorse jsfiddle: https://cdn.rawgit.com/IonicaBizau/console.js/0ee8fcc4ea802247c5a7a8e3c6530ede8ade308b/lib/console.min.js

Quindi puoi semplicemente aggiungere questo nell'HTML:
<pre class="console"></pre>

Inizializza la console nel tuo JS:
ConsoleJS.init({selector: "pre.console"});

Esempio di utilizzo: vederlo su 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);

— Emmanuel NK
fonte

-4

Usa la alert()funzione:

alert(variable name);
alert("Hello World");

— Ashutosh Jha
fonte

1

L'allerta non è mai un buon strumento di debug - non mostra oggetti, interrompe il comportamento del codice, ecc. ecc.

— Muers