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


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

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


441
2017-10-20 10:03


origine


Réponses:


Exécution du code suivant depuis la barre d'adresse du navigateur:

javascript: console.log (2);

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


575
2017-10-20 10:20



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 enregistrent 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.


165
2018-05-03 11:01



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 le magique %o déverser cliquable et explorable le contenu d'un objet JavaScript. %s a été montré juste pour un enregistrement.

Aussi c'est cool aussi:

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

Ce qui donne une trace de pile de type Java au point de new Error() invocation (y compris chemin d'accès au fichier et numéro de ligne!).

Tous les deux %o et new Error().stack sont disponibles dans Chrome et Firefox!

Aussi pour les traces de pile dans Firefox:

console.trace();

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

Piratage heureux!

METTRE À JOUR: Certaines bibliothèques sont écrites par de mauvaises personnes qui redéfinissent le console objet à leurs propres fins. Pour restaurer le navigateur d'origine console après avoir chargé la bibliothèque, utilisez:

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

Voir la question de débordement de pile Restauration de console.log ().


44
2017-10-22 07:44



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

(Ou créez votre propre console.log () qui retourne juste false.)


16
2018-05-28 12:59



Voici un script court qui vérifie si la console est disponible. Si ce n'est pas le cas, il essaie de charger Pyromane et si Firebug n'est pas disponible, il charge Firebug Lite. Maintenant vous pouvez utiliser console.log dans 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.
}

16
2017-09-16 13:28



En plus de La réponse de Delan Azabani, J'aime partager mon 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 un console.log fonction, mais pas 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() {};
  }
}

13
2017-09-25 10:14



Ou utilisez cette fonction:

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

11
2018-05-22 06:51



Voici ma classe de wrapper de console. Cela me donne aussi une sortie étendue pour faciliter la vie. Notez l'utilisation de localConsole.debug.call() pour que localConsole.debug s'exécute dans la portée de la classe appelante, donnant accès à ses toString mé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 dans Pyromane:

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

6
2017-11-16 03:18



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'au moins avoir une certaine pratique de journalisation autre que coller console.log() directement dans votre code JavaScript, car si vous l'oubliez et que ce dernier est sur un site de production, il risque de casser tout le code JavaScript de cette page.


5
2017-10-11 12:42



Vous pourriez 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). Il suffit d'appuyer F12 et appuyez sur l'onglet Console. Vous verrez le résultat. Codage heureux. :)


4
2018-06-23 05:22



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

Donc, j'ai surchargé l'objet console lui-même ... J'ai ajouté un drapeau __localhost qui n'accepte que les instructions console quand 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 de près le code, vous découvrirez la fonction console.examine (). J'ai créé cette année pour que je puisse laisser le code de débogage dans certaines zones autour du produit pour aider à dépanner QA/ Problèmes clients Par exemple, je laisserais la ligne suivante dans un code publié:

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

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

    top.__examine_someLabel = true;

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


4
2018-06-10 02:54