console.log qui garde les numéros de ligne et supporte la plupart des méthodes?

Question

Je suis actuellement à la recherche d'une console.journal wrapper qui gère les choses suivantes:

• Maintien de l'enregistrement numéro de ligne et le nom de fichier du journal d'instruction intacte
• Donne accès à tous les journaux de la gravité des méthodes (erreur, journal, debug, ...) et les affiche dans la console en tant qu'ils sont connectés
• ne fournir certains de secours (par exemple les appels de la méthode log lorsque le navigateur ne supporte pas d'erreur)
• peut-être désactivé dans un emplacement central, de sorte que je peux désactiver la journalisation pour la production
• il prend en charge le cas pas de console existe, et ne jetez pas les erreurs

Depuis la journalisation en Java Script est si contradictoire, il doit y avoir une solution. La mise en œuvre de moi-même est un peu fastidieux, parce que je ne suis pas vraiment bon en java script, donc j'espère que pour une bibliothèque.

J'ai actuellement trouvé cet enregistreur offre toutes les fonctionnalités, mais elle n'en désordre les numéros de ligne. http://benalman.com/projects/javascript-debug-console-log/

Espérons que j'ai simplement utilisé le mauvais termes de recherche dans google!

Answer 1

Il y a mon propre log4javascript , qui a sa propre console de journalisation mais fournit également un wrapper autour de console.log . Il remplit tous vos critères, à l'exception du maintien des numéros de ligne, ce qui est impossible si vous enregistrez des appels à console.log() etc. dans une autre fonction.

 var log = log4javascript.getLogger("main");
var appender = new log4javascript.BrowserConsoleAppender();
log.addAppender(appender);
log.debug("Hello world");
 

Answer 2

Je vous recommande également les log4javascript et d'expliquer comment vous pouvez toujours conserver les informations sur l'imprimé de nom de fichier et la ligne, au moins dans google Chrome.

Je ne parle pas de changer le nom du fichier et la ligne imprimée par Chrome, mais vous pouvez obtenir l'information qui vous intéresse et les ajouter à l'instruction de journal. Ma solution a été rapidement un hack mais je pense qu'avec un peu plus de travail, vous pouvez obtenir bien formaté journal des états. Il a probablement aussi une lourde les performances de l'impact, mais puisque vous ne pouvez pas laisser vos journaux activé dans la production, cela ne devrait pas être trop un problème.

Le Concept

Dans Chrome, vous pouvez créer un objet d'Erreur qui fournit une propriété de pile qui vous montre votre pile actuel emplacement et quelque part dans la pile de chaîne, vous trouverez le fichier et le numéro de ligne de votre script d'appel.

  > new Error().stack
  "Error
    at eval at <anonymous> (eval at evaluate (unknown source))
    at eval at evaluate (unknown source)
    at FrameMirror.evaluate (native)
    at Object.evaluate (unknown source)
    at Object._evaluateOn (unknown source)
    at Object._evaluateAndWrap (unknown source)
    at Object.evaluateOnCallFrame (unknown source)
    at meinAjaxAufruf (http://localhost:8080/numberajax.js:21:9)
    at HTMLInputElement.onkeyup (http://localhost:8080/numberajax.html:15:188)"

Pour un log4javascript appel de la trace de la pile pourrait ressembler à quelque chose comme ceci:

"Error
    at Object.append (http://localhost:8080/log4javascript_uncompressed.js:1921:17)
    at Object.doAppend (http://localhost:8080/log4javascript_uncompressed.js:1047:9)
    at Object.callAppenders (http://localhost:8080/log4javascript_uncompressed.js:647:27)
    at Object.log (http://localhost:8080/log4javascript_uncompressed.js:640:10)
    at Object.debug (http://localhost:8080/log4javascript_uncompressed.js:748:9)
    at meinAjaxAufruf (http://localhost:8080/numberajax.js:36:16)
    at HTMLInputElement.onkeyup (http://localhost:8080/numberajax.html:16:188)"

Et le fichier et la ligne qui a fait le log4javascript appel et que je me suis intéressé en est

at meinAjaxAufruf (http://localhost:8080/numberajax.js:36:16)

La Solution

Je suppose que la pile de la profondeur à partir du script de votre intérêt pour le vrai console appel arrive, c'est toujours la même. Alors maintenant, vous avez simplement à savoir où l' BrowserConsoleAppender fait son window.console d'accès et d'ajouter la ligne qui vous intéresse pour la chaîne formatée. J'ai fait les modifications suivantes à l' log4javascript_uncompressed.js (version 1.4.2 ligne 1913):

} else if (window.console && window.console.log) { // Safari and Firebug
        var formattedMesage = getFormattedMessage();

        //---my additions
        var isChrome = navigator.userAgent.indexOf("Chrome") !== -1;
        if(isChrome){
            var stack = new Error().stack;
            var lineAccessingLogger = stack.split("\n")[6];
            formattedMesage += "\n" + lineAccessingLogger;
        }
        //---

        // Log to Firebug using its logging methods or revert to the console.log
        // method in Safari
        if (window.console.debug && Level.DEBUG.isGreaterOrEqual(loggingEvent.level)) {
            window.console.debug(formattedMesage);
        } else if (window.console.info && Level.INFO.equals(loggingEvent.level)) {
        ...

Maintenant, au lieu de

17:53:22,872 DEBUG - sending /NumberServlet?zahl=1&text=
                                                 log4javascript.js:154

Je reçois

17:55:53,008 DEBUG - sending /NumberServlet?zahl=1&text=

    at meinAjaxAufruf (http://localhost:8080/numberajax.js:36:16) log4javascript_uncompressed.js:1930

Il n'en est pas une solution sympa :), mais j'ai ce dont j'ai besoin.

Avec un peu plus de connaissances sur le cadre je suppose que l'on pouvait changer le PatternLayout dans une manière que vous pouvez définir le mode d'impression le nom/l'emplacement et le numéro de ligne.

modifier la Place de mon avant la solution que j'ai apporté quelques modifications à la PatternLayout.le prototype.fonction format, alors maintenant, je peux utiliser l'option additionnelle %l pour définir où et comment je veux en sortie le fichier appelant et sa ligne. J'ai publié mes changements et un exemple d'utilisation d'un Essentiel.

Answer 3

Nous avons eu ce problème avec notre wrapper de journal également et il s'est avéré qu'il existe une solution de contournement fantastique et simple utilisant une application de fonction partielle:

 if(DEBUG_ENABLED && (typeof console != 'undefined')) {
    this.debug = console.log.bind(console);
}
else {
    this.debug = function(message) {};
}
 

Avec cela, votre navigateur détectera le numéro de ligne et le fichier corrects de la source que vous souhaitez enregistrer.

Answer 4

Crossposting de question connexe (Un bon wrapper pour la console.journal avec le bon numéro de ligne?) mais avec la mise à jour de la solution pour répondre à de multiples méthodes.

---

J'ai aimé @fredrik réponse, donc j'ai roulé avec une autre réponse qui divise le Webkit stacktrace, et l'a fusionné avec @PaulIrish sûre de la console.journal wrapper. "Normalise" l' filename:line pour un "objet" de sorte qu'il se démarque et regarde essentiellement la même dans les FF et Chrome.

Les essais en violon: http://jsfiddle.net/drzaus/pWe6W/9/

_log = (function (methods, undefined) {

    var Log = Error; // does this do anything?  proper inheritance...?
    Log.prototype.write = function (args, method) {
        /// <summary>
        /// Paulirish-like console.log wrapper.  Includes stack trace via @fredrik SO suggestion (see remarks for sources).
        /// </summary>
        /// <param name="args" type="Array">list of details to log, as provided by `arguments`</param>
        /// <param name="method" type="string">the console method to use:  debug, log, warn, info, error</param>
        /// <remarks>Includes line numbers by calling Error object -- see
        /// * http://paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
        /// * http://stackoverflow.com/questions/13815640/a-proper-wrapper-for-console-log-with-correct-line-number
        /// * http://stackoverflow.com/a/3806596/1037948
        /// </remarks>

        // via @fredrik SO trace suggestion; wrapping in special construct so it stands out
        var suffix = {
            "@": (this.lineNumber
                    ? this.fileName + ':' + this.lineNumber + ":1" // add arbitrary column value for chrome linking
                    : extractLineNumberFromStack(this.stack)
            )
        };

        args = args.concat([suffix]);
        // via @paulirish console wrapper
        if (console && console[method]) {
            if (console[method].apply) { console[method].apply(console, args); } else { console[method](args); } // nicer display in some browsers
        }
    };
    var extractLineNumberFromStack = function (stack) {
        /// <summary>
        /// Get the line/filename detail from a Webkit stack trace.  See http://stackoverflow.com/a/3806596/1037948
        /// </summary>
        /// <param name="stack" type="String">the stack string</param>

        // correct line number according to how Log().write implemented
        var line = stack.split('\n')[3];
        // fix for various display text
        line = (line.indexOf(' (') >= 0
            ? line.split(' (')[1].substring(0, line.length - 1)
            : line.split('at ')[1]
            );
        return line;
    };

    // method builder
    var logMethod = function(method) {
        return function (params) {
            /// <summary>
            /// Paulirish-like console.log wrapper
            /// </summary>
            /// <param name="params" type="[...]">list your logging parameters</param>

            // only if explicitly true somewhere
            if (typeof DEBUGMODE === typeof undefined || !DEBUGMODE) return;

            // call handler extension which provides stack trace
            Log().write(Array.prototype.slice.call(arguments, 0), method); // turn into proper array & declare method to use
        };//--  fn  logMethod
    };
    var result = logMethod('log'); // base for backwards compatibility, simplicity
    // add some extra juice
    for(var i in methods) result[methods[i]] = logMethod(methods[i]);

    return result; // expose
})(['error', 'debug', 'info', 'warn']);//--- _log

Answer 5

Pour rester simple, j'ai le wrapper ci-dessous pour les méthodes de la console:

 var noop = function () {};
window.consolex = {
    debug : window.console && window.console.debug && console.debug.bind(console) || noop,
    log : window.console && window.console.log && console.log.bind(console) || noop,
    warn: window.WARN = window.console && window.console.warn && console.warn.bind(console) || noop,
    error: window.ERROR = window.console && window.console.error && console.error.bind(console) || noop
};
 

De plus, pour obtenir de meilleurs journaux dans IE et les navigateurs plus anciens, veuillez lire: Journalisation détaillée de la console