Comment imprimer des messages de débogage dans la console JavaScript de Google Chrome?

Comment imprimer des messages de débogage dans la console JavaScript de Google Chrome?

Veuillez noter que la console JavaScript n'est pas la même chose que le débogueur JavaScript; ils ont différentes syntaxes AFAIK, donc la commande d' impression dans le débogueur JavaScript ne fonctionnera pas ici. Dans la console JavaScript, print()enverra le paramètre à l'imprimante.

Exécution du code suivant à partir de la barre d'adresse du navigateur:

javascript: console.log (2);

imprime avec succès le message dans la "console JavaScript" dans Google Chrome.

En améliorant l'idée d'Andru, vous pouvez écrire un script qui crée des fonctions de console si elles n'existent pas:

if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || function(){};
console.error = console.error || function(){};
console.info = console.info || function(){};

Ensuite, utilisez l'un des éléments suivants:

console.log(...);
console.error(...);
console.info(...);
console.warn(...);

Ces fonctions consignent différents types d'éléments (qui peuvent être filtrés en fonction du journal, des informations, des erreurs ou des avertissements) et ne provoquent pas d'erreurs lorsque la console n'est pas disponible. Ces fonctions fonctionneront dans les consoles Firebug et Chrome.

Ajoutez simplement une fonctionnalité intéressante qui manque à beaucoup de développeurs:

console.log("this is %o, event is %o, host is %s", this, e, location.host);

C'est la magique %odécharge cliquable et profond explorable contenu d'un objet JavaScript. %sa été montré juste pour un record.

C'est aussi cool aussi:

console.log("%s", new Error().stack);

Ce qui donne une trace de pile semblable à Java jusqu'au point de l' new Error()appel (y compris le chemin vers le fichier et le numéro de ligne !).

Les deux %oet new Error().stacksont disponibles dans Chrome et Firefox!

Aussi pour les traces de pile dans Firefox:

console.trace();

Comme le dit https://developer.mozilla.org/en-US/docs/Web/API/console .

Bon piratage!

MISE À JOUR : Certaines bibliothèques sont écrites par de mauvaises personnes qui redéfinissent l' consoleobjet à leurs propres fins. Pour restaurer le navigateur d'origine consoleaprès le chargement de la bibliothèque, utilisez:

delete console.log;
delete console.warn;
....

Voir la question Stack Overflow Restoring console.log () .

Juste un petit avertissement - si vous voulez tester dans Internet Explorer sans supprimer tous les console.log (), vous devrez utiliser Firebug Lite ou vous obtiendrez des erreurs pas particulièrement conviviales.

(Ou créez votre propre console.log () qui renvoie simplement false.)

Voici un petit script qui vérifie si la console est disponible. Si ce n'est pas le cas, il essaie de charger Firebug et si Firebug n'est pas disponible, il charge Firebug Lite. Vous pouvez désormais l'utiliser console.logdans n'importe quel navigateur. Prendre plaisir!

if (!window['console']) {

    // Enable console
    if (window['loadFirebugConsole']) {
        window.loadFirebugConsole();
    }
    else {
        // No console, use Firebug Lite
        var firebugLite = function(F, i, r, e, b, u, g, L, I, T, E) {
            if (F.getElementById(b))
                return;
            E = F[i+'NS']&&F.documentElement.namespaceURI;
            E = E ? F[i + 'NS'](E, 'script') : F[i]('script');
            E[r]('id', b);
            E[r]('src', I + g + T);
            E[r](b, u);
            (F[e]('head')[0] || F[e]('body')[0]).appendChild(E);
            E = new Image;
            E[r]('src', I + L);
        };
        firebugLite(
            document, 'createElement', 'setAttribute', 'getElementsByTagName',
            'FirebugLite', '4', 'firebug-lite.js',
            'releases/lite/latest/skin/xp/sprite.png',
            'https://getfirebug.com/', '#startOpened');
    }
}
else {
    // Console is already available, no action needed.
}

En plus de la réponse de Delan Azabani , j'aime partager ma console.js, et j'utilise dans le même but. Je crée une console noop en utilisant un tableau de noms de fonctions, ce qui est à mon avis un moyen très pratique de le faire, et j'ai pris soin d'Internet Explorer, qui a une console.logfonction, mais non console.debug:

// Create a noop console object if the browser doesn't provide one...
if (!window.console){
  window.console = {};
}

// Internet Explorer has a console that has a 'log' function, but no 'debug'. To make console.debug work in Internet Explorer,
// We just map the function (extend for info, etc. if needed)
else {
  if (!window.console.debug && typeof window.console.log !== 'undefined') {
    window.console.debug = window.console.log;
  }
}

// ... and create all functions we expect the console to have (taken from Firebug).
var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",
    "group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

for (var i = 0; i < names.length; ++i){
  if(!window.console[names[i]]){
    window.console[names[i]] = function() {};
  }
}

Ou utilisez cette fonction:

function log(message){
    if (typeof console == "object") {
        console.log(message);
    }
}

Voici ma classe d'encapsuleur de console. Cela me donne également une sortie de portée pour me faciliter la vie. Notez l'utilisation de localConsole.debug.call()afin que localConsole.debugs'exécute dans la portée de la classe appelante, donnant accès à sa toStringméthode.

localConsole = {

    info: function(caller, msg, args) {
        if ( window.console && window.console.info ) {
            var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
            if (args) {
                params = params.concat(args);
            }
            console.info.apply(console, params);
        }
    },

    debug: function(caller, msg, args) {
        if ( window.console && window.console.debug ) {
            var params = [(this.className) ? this.className : this.toString() + '.' + caller + '(), ' + msg];
            if (args) {
                params = params.concat(args);
            }
            console.debug.apply(console, params);
        }
    }
};

someClass = {

    toString: function(){
        return 'In scope of someClass';
    },

    someFunc: function() {

        myObj = {
            dr: 'zeus',
            cat: 'hat'
        };

        localConsole.debug.call(this, 'someFunc', 'myObj: ', myObj);
    }
};

someClass.someFunc();

Cela donne une sortie comme ça dans Firebug :

In scope of someClass.someFunc(), myObj: Object { dr="zeus", more...}

Ou Chrome:

In scope of someClass.someFunc(), obj:
Object
cat: "hat"
dr: "zeus"
__proto__: Object

Personnellement, j'utilise ceci, qui est similaire à celui de tarek11011:

// Use a less-common namespace than just 'log'
function myLog(msg)
{
    // Attempt to send a message to the console
    try
    {
        console.log(msg);
    }
    // Fail gracefully if it does not exist
    catch(e){}
}

Le point principal est que c'est une bonne idée d'avoir au moins une certaine pratique de journalisation autre que de simplement coller console.log()directement dans votre code JavaScript, car si vous l'oubliez, et qu'il se trouve sur un site de production, il peut potentiellement casser tout le code JavaScript pour cette page.

Vous pouvez utiliser console.log()si vous avez un code débogué dans quel éditeur de logiciel de programmation vous avez et vous verrez la sortie probablement le meilleur éditeur pour moi (Google Chrome). Appuyez simplement sur F12et appuyez sur l'onglet Console. Vous verrez le résultat. Codage heureux. :)

J'ai eu beaucoup de problèmes avec les développeurs qui archivaient leurs instructions console. (). Et, je n'aime vraiment pas le débogage d'Internet Explorer, malgré les améliorations fantastiques d' Internet Explorer 10 et de Visual Studio 2012 , etc.

J'ai donc remplacé l'objet console lui-même ... J'ai ajouté un indicateur __localhost qui n'autorise les instructions de console que sur localhost. J'ai également ajouté des fonctions console. () À Internet Explorer (qui affiche une alerte () à la place).

// Console extensions...
(function() {
    var __localhost = (document.location.host === "localhost"),
        __allow_examine = true;

    if (!console) {
        console = {};
    }

    console.__log = console.log;
    console.log = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__log === "function") {
                console.__log(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__info = console.info;
    console.info = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__info === "function") {
                console.__info(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__warn = console.warn;
    console.warn = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__warn === "function") {
                console.__warn(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__error = console.error;
    console.error = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__error === "function") {
                console.__error(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg);
            }
        }
    };

    console.__group = console.group;
    console.group = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__group === "function") {
                console.__group(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert("group:\r\n" + msg + "{");
            }
        }
    };

    console.__groupEnd = console.groupEnd;
    console.groupEnd = function() {
        if (__localhost) {
            if (typeof console !== "undefined" && typeof console.__groupEnd === "function") {
                console.__groupEnd(arguments);
            } else {
                var i, msg = "";
                for (i = 0; i < arguments.length; ++i) {
                    msg += arguments[i] + "\r\n";
                }
                alert(msg + "\r\n}");
            }
        }
    };

    /// <summary>
    /// Clever way to leave hundreds of debug output messages in the code,
    /// but not see _everything_ when you only want to see _some_ of the
    /// debugging messages.
    /// </summary>
    /// <remarks>
    /// To enable __examine_() statements for sections/groups of code, type the
    /// following in your browser's console:
    ///       top.__examine_ABC = true;
    /// This will enable only the console.examine("ABC", ... ) statements
    /// in the code.
    /// </remarks>
    console.examine = function() {
        if (!__allow_examine) {
            return;
        }
        if (arguments.length > 0) {
            var obj = top["__examine_" + arguments[0]];
            if (obj && obj === true) {
                console.log(arguments.splice(0, 1));
            }
        }
    };
})();

Exemple d'utilisation:

    console.log("hello");

Chrome / Firefox:

    prints hello in the console window.

Internet Explorer:

    displays an alert with 'hello'.

Pour ceux qui regardent attentivement le code, vous découvrirez la fonction console.examine (). J'ai créé cela il y a quelques années afin de pouvoir laisser le code de débogage dans certaines zones autour du produit pour aider à résoudre les problèmes d' assurance qualité / client. Par exemple, je laisserais la ligne suivante dans du code publié:

    function doSomething(arg1) {
        // ...
        console.examine("someLabel", arg1);
        // ...
    }

Et puis, à partir du produit commercialisé, tapez ce qui suit dans la console (ou la barre d'adresse préfixée par 'javascript:'):

    top.__examine_someLabel = true;

Ensuite, je verrai toutes les instructions consignées console.examine (). Cela a été une aide fantastique à plusieurs reprises.

Simple shim Internet Explorer 7 et inférieur qui préserve la numérotation des lignes pour les autres navigateurs:

/* Console shim */
(function () {
    var f = function () {};
    if (!window.console) {
        window.console = {
            log:f, info:f, warn:f, debug:f, error:f
        };
    }
}());

console.debug("");

L'utilisation de cette méthode imprime le texte dans une couleur bleu vif dans la console.

Améliorant davantage les idées de Delan et Andru (c'est pourquoi cette réponse est une version éditée); console.log est susceptible d'exister alors que les autres fonctions peuvent ne pas exister, donc ayez la mappe par défaut à la même fonction que console.log ....

Vous pouvez écrire un script qui crée des fonctions de console si elles n'existent pas:

if (!window.console) console = {};
console.log = console.log || function(){};
console.warn = console.warn || console.log;  // defaults to log
console.error = console.error || console.log; // defaults to log
console.info = console.info || console.log; // defaults to log

Ensuite, utilisez l'un des éléments suivants:

console.log(...);
console.error(...);
console.info(...);
console.warn(...);

Ces fonctions consignent différents types d'éléments (qui peuvent être filtrés en fonction du journal, des informations, des erreurs ou des avertissements) et ne provoquent pas d'erreurs lorsque la console n'est pas disponible. Ces fonctions fonctionneront dans les consoles Firebug et Chrome.