Javascript: console.journal au format html

Je voudrais écrire la console.la sortie du journal d'une couche div.

Par exemple:

document.write(console.log(5+1)); //Incorrect, random example

Quelqu'un peut-il me donner une solution à mon problème?

Merci.

EDIT:

ce que je voulais dire, c'est, par exemple:

console.log("hi");

et il montre la sortie de "bonjour" à l'écran.

Remarque: Un exemple: http://labs.codecademy.com/#:workspace

  • console.log et document.write sont à la fois des effets secondaires, ils ne retournent rien.
  • Il est donc impossible d'imprimer la sortie de la console.journal à l'écran?
  • nope.
  • Qu'entendez-vous par la sortie de la console? La sortie est 6 droit? Vous pouvez évaluer l'expression avec document.write(5+1).
  • Je voudrais imprimer la console.journal de la sortie à l'écran
  • Vous ne pouvez pas.....
  • Prendre un coup d'oeil à nouveau.
  • Merci à vous tous, j'ai été capable de m'expliquer clairement.
  • où? Je ne vois pas de réponse, afin de capturer console.log's de sortie. Ils ont tous simplement essayer de recréer quelque chose qui ressemble à ça, mais ils n'ont rien à voir avec de véritables console.log
  • Je parlais de l'exemple donné dans la question.
  • labs.codecademy.com/#:workspace

InformationsquelleAutor leonneo | 2013-11-28
  1. 82

    Vous pouvez remplacer la valeur par défaut de mise en œuvre de console.log()

    (function () {
    var old = console.log;
    var logger = document.getElementById('log');
    console.log = function (message) {
        if (typeof message == 'object') {
            logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';
        } else {
            logger.innerHTML += message + '<br />';
        }
    }
})();

    Démo: Violon

    • String(message) ? Pourquoi ne pas simplement message?
    • la réponse est mieux, car il traite les objets: stackoverflow.com/a/35449256/470749
    • En plus de garder à l'aide de la console par défaut.journal de fonctionnalités, ajouter des " vieux de la(message);' à la fin de la nouvelle console.la fonction log.
    InformationsquelleAutor Arun P Johny
  2. 24

    Légère amélioration sur @arun-p-johny réponse:

    En html,

    <pre id="log"></pre>

    En js,

    (function () {
    var old = console.log;
    var logger = document.getElementById('log');
    console.log = function () {
      for (var i = 0; i < arguments.length; i++) {
        if (typeof arguments[i] == 'object') {
            logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(arguments[i], undefined, 2) : arguments[i]) + '<br />';
        } else {
            logger.innerHTML += arguments[i] + '<br />';
        }
      }
    }
})();

    Commencer à utiliser:

    console.log('How', true, new Date());
    • Pour garder l'original console.log fonctionnalité ajouter old(...arguments); à la fin de la nouvelle console de la fonction log. N'oubliez pas d'utiliser la propagation de l'opérateur!
    • old.apply(console, arguments); aussi travailler pour garder l'original arguments.
    • Je suis un peu confus, je suis assez nouveau pour Javascript, quelle est la structure de cette fonction. la première tranche, pourquoi? et ce qui est bien avec la dernière bracketpair?
    • il est enveloppé dans une auto-exécution de la fonction anonyme.
    InformationsquelleAutor Nitin...
  3. 12

    Je viens un peu tard avec une version plus avancée de Arun P Johny réponse. Sa solution n'est pas de gérer plusieurs console.log() arguments et de ne pas donner accès à la fonction d'origine.

    Voici ma version:

    JS:

    (function (logger) {
    console.old = console.log;
    console.log = function () {
        var output = "", arg, i;

        for (i = 0; i < arguments.length; i++) {
            arg = arguments[i];
            output += "<span class=\"log-" + (typeof arg) + "\">";

            if (
                typeof arg === "object" &&
                typeof JSON === "object" &&
                typeof JSON.stringify === "function"
            ) {
                output += JSON.stringify(arg);   
            } else {
                output += arg;   
            }

            output += "</span>&nbsp;";
        }

        logger.innerHTML += output + "<br>";
        console.old.apply(undefined, arguments);
    };
})(document.getElementById("logger"));

//Testing
console.log("Hi!", {a:3, b:6}, 42, true);
console.log("Multiple", "arguments", "here");
console.log(null, undefined);
console.old("Eyy, that's the old and boring one.");

    CSS:

    body {background: #333;}
.log-boolean,
.log-undefined {color: magenta;}
.log-object,
.log-string {color: orange;}
.log-number {color: cyan;}

    HTML:

    <pre id="logger"></pre>

    Je l'ai pris un minuscule peu plus loin et a ajouté une classe pour chaque journal de sorte que vous pouvez mettre de la couleur. Il sort tous les arguments comme on le voit dans la console Chromée. Vous avez également accès à l'ancien journal par console.old().

    Ici est une version compacte du script ci-dessus pour coller à la volée, juste pour vous:

    <script>
    !function(o){console.old=console.log,console.log=function(){var n,e,t="";for(e=0;e<arguments.length;e++)t+='<span class="log-'+typeof(n=arguments[e])+'">',"object"==typeof n&&"object"==typeof JSON&&"function"==typeof JSON.stringify?t+=JSON.stringify(n):t+=n,t+="</span>&nbsp;";o.innerHTML+=t+"<br>",console.old.apply(void 0,arguments)}}
    (document.body);
</script>

    Remplacer document.body dans les parenthèses avec ce que l'élément que vous souhaitez connecter.

    • A pris cette solution peu encore. Maintenant comprend le défilement automatique sur le dépassement et refait toutes les console de méthodes plutôt que de simplement .log().
    • Je sais que c'est un vieux thread, mais j'ai juste commencé à l'aide de cette dans une application mobile. Une seule question: comment puis-je afficher le fichier et la ligne qui a généré le journal?
    • Je ne pense pas que vous le pouvez. Il suffit de ne pas obtenir cette information. Si c'est une application, vous devriez regarder pour d'autres options de débogage comme le débogage USB.
    • prendre un petit peu plus loin et d'ajouter clair de la console! 😉
    InformationsquelleAutor Hristiyan Dodov
  4. 9

    Un peu en retard à la fête, mais j'ai pris @Hristiyan Dodov réponse un peu plus loin encore.

    Tous console méthodes sont maintenant refaits, et en cas de débordement de texte, en option, un défilement automatique vers le bas est inclus. Les couleurs sont maintenant basées sur la méthode de journalisation plutôt que les arguments.

    JS:

    rewireLoggingToElement(
() => document.getElementById("log"),
() => document.getElementById("log-container"), true);
function rewireLoggingToElement(eleLocator, eleOverflowLocator, autoScroll) {
fixLoggingFunc('log');
fixLoggingFunc('debug');
fixLoggingFunc('warn');
fixLoggingFunc('error');
fixLoggingFunc('info');
function fixLoggingFunc(name) {
console['old' + name] = console[name];
console[name] = function(...arguments) {
const output = produceOutput(name, arguments);
const eleLog = eleLocator();
if (autoScroll) {
const eleContainerLog = eleOverflowLocator();
const isScrolledToBottom = eleContainerLog.scrollHeight - eleContainerLog.clientHeight <= eleContainerLog.scrollTop + 1;
eleLog.innerHTML += output + "<br>";
if (isScrolledToBottom) {
eleContainerLog.scrollTop = eleContainerLog.scrollHeight - eleContainerLog.clientHeight;
}
} else {
eleLog.innerHTML += output + "<br>";
}
console['old' + name].apply(undefined, arguments);
};
}
function produceOutput(name, args) {
return args.reduce((output, arg) => {
return output +
"<span class=\"log-" + (typeof arg) + " log-" + name + "\">" +
(typeof arg === "object" && (JSON || {}).stringify ? JSON.stringify(arg) : arg) +
"</span>&nbsp;";
}, '');
}
}
setInterval(() => {
const method = (['log', 'debug', 'warn', 'error', 'info'][Math.floor(Math.random() * 5)]);
console[method](method, 'logging something...');
}, 200);

    CSS:

    #log-container { overflow: auto; height: 150px; }
.log-warn { color: orange }
.log-error { color: red }
.log-info { color: skyblue }
.log-log { color: silver }
.log-warn, .log-error { font-weight: bold; }

    HTML:

    <div id="log-container">
<pre id="log"></pre>
</div>

    • Botteman, il semble que cela ne fonctionne pas sur chrome 68 sur android!
    • maintenant la question est, comment puis-je ajouter facilement de la console.le temps et la console.timeEnd?
    • Ce que fait ce code? rewireLoggingToElement( () => document.getElementById("log"), () => document.getElementById("log-container"), true); pourquoi êtes-vous en passant la flèche de la fonction à la fonction? c'est du javascript valide, mais il semble très familier pour moi.
    • ce sont de simples fermetures. À l'aide de la fonction de variables que vous pouvez retarder l'exécution jusqu'à ce que le résultat est réellement nécessaire (par exemple dans le cas où le DOM n'a pas encore initialisés ou va changer dans le futur).
    InformationsquelleAutor Benny Bottema
  5. 4

    Créer une sortie

    <div id="output"></div>

    Écrire à l'aide de JavaScript

    var output = document.getElementById("output");
output.innerHTML = "hello world";

    Si vous souhaitez gérer plus complexe des valeurs de sortie, vous pouvez utiliser JSON.stringify

    var myObj = {foo: "bar"};
output.innerHTML = JSON.stringify(myObj);
    InformationsquelleAutor maček