¿Cómo imprimo mensajes de depuración en la Consola JavaScript de Google Chrome?

¿Cómo imprimo mensajes de depuración en la Consola JavaScript de Google Chrome?

Tenga en cuenta que la consola de JavaScript no es lo mismo que el depurador de JavaScript; tienen diferentes sintaxis AFAIK, por lo que el comando de impresión en JavaScript Debugger no funcionará aquí. En la consola de JavaScript, print()enviará el parámetro a la impresora.

Ejecutando el siguiente código desde la barra de direcciones del navegador:

javascript: console.log (2);

imprime correctamente el mensaje en la "Consola de JavaScript" en Google Chrome.

Mejorando la idea de Andru, puede escribir un script que cree funciones de consola si no existen:

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

Luego, use cualquiera de los siguientes:

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

Estas funciones registrarán diferentes tipos de elementos (que se pueden filtrar según el registro, la información, el error o la advertencia) y no causarán errores cuando la consola no esté disponible. Estas funciones funcionarán en las consolas Firebug y Chrome.

Simplemente agregue una característica genial que muchos desarrolladores se pierden:

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

Este es el %ovolcado mágico de contenido cliqueable y de navegación profunda de un objeto JavaScript.%sse mostró solo para un registro.

También esto también es genial:

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

Lo que proporciona un seguimiento de pila similar a Java hasta el punto de la new Error()invocación (incluida la ruta al archivo y el número de línea !).

Ambos %oynew Error().stack están disponibles en Chrome y Firefox!

También para el uso de rastros de pila en Firefox:

console.trace();

Como https://developer.mozilla.org/en-US/docs/Web/API/console dice.

¡Feliz pirateo!

ACTUALIZACIÓN : Algunas bibliotecas están escritas por personas malas que redefinen el consoleobjeto para sus propios fines. Para restaurar el navegador original consoledespués de cargar la biblioteca, use:

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

Consulte la pregunta sobre desbordamiento de pila Restaurando console.log () .

Solo una advertencia rápida: si desea probar en Internet Explorer sin eliminar todos los console.log (), necesitará usar Firebug Lite o obtendrá algunos errores no particularmente amigables.

(O cree su propia console.log () que simplemente devuelve false).

Aquí hay un breve script que comprueba si la consola está disponible. Si no es así, intenta cargar Firebug y si Firebug no está disponible, carga Firebug Lite. Ahora puedes usarlo console.logen cualquier navegador. ¡Disfrutar!

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

Además de la respuesta de Delan Azabani , me gusta compartir mi console.js, y lo uso para el mismo propósito. Creo una consola noop usando una matriz de nombres de funciones, lo que en mi opinión es una forma muy conveniente de hacerlo, y me encargué de Internet Explorer, que tiene una console.logfunción, pero no 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() {};
  }
}

O use esta función:

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

Aquí está mi clase de contenedor de consola. También me da salida de alcance para hacer la vida más fácil. Tenga en cuenta el uso de localConsole.debug.call()so que se localConsole.debugejecuta en el ámbito de la clase de llamada, proporcionando acceso a su toStringmétodo.

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();

Esto da salida como en Firebug :

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

O cromo:

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

Personalmente, uso esto, que es similar a 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){}
}

El punto principal es que es una buena idea al menos tener alguna práctica de inicio de sesión que no sea simplemente pegarse console.log()directamente en su código JavaScript, porque si lo olvida, y está en un sitio de producción, puede potencialmente romper todo el código JavaScript para esa página

Podría usarlo console.log()si tiene un código depurado en el editor de software de programación que tiene y verá que la salida es probablemente el mejor editor para mí (Google Chrome). Simplemente presione F12y presione la pestaña Consola. Verás el resultado. Feliz codificación :)

He tenido muchos problemas con los desarrolladores que registran sus declaraciones de consola. (). Y, realmente no me gusta depurar Internet Explorer, a pesar de las fantásticas mejoras de Internet Explorer 10 y Visual Studio 2012 , etc.

Entonces, he anulado el objeto de la consola en sí ... Agregué un indicador __localhost que solo permite declaraciones de consola cuando está en localhost. También agregué funciones de consola. () A Internet Explorer (que muestra una alerta () en su lugar).

// 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));
            }
        }
    };
})();

Ejemplo de uso:

    console.log("hello");

Chrome / Firefox:

    prints hello in the console window.

Explorador de Internet:

    displays an alert with 'hello'.

Para aquellos que miran detenidamente el código, descubrirán la función console.examine (). Lo creé hace años para poder dejar el código de depuración en ciertas áreas del producto para ayudar a solucionar problemas de QA / cliente. Por ejemplo, dejaría la siguiente línea en algún código publicado:

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

Y luego, desde el producto lanzado, escriba lo siguiente en la consola (o barra de direcciones con el prefijo 'javascript:'):

    top.__examine_someLabel = true;

Luego, veré todas las instrucciones de console.examine () registradas. Ha sido una ayuda fantástica muchas veces.

Internet simple 7 e inferior de cuña que conserva la numeración de línea para otros navegadores:

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

console.debug("");

El uso de este método imprime el texto en un color azul brillante en la consola.

Mejorando aún más las ideas de Delan y Andru (por eso esta respuesta es una versión editada); es probable que exista console.log mientras que las otras funciones no, así que tenga el mapa predeterminado para la misma función que console.log ...

Puede escribir un script que cree funciones de consola si no existen:

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

Luego, use cualquiera de los siguientes:

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

Estas funciones registrarán diferentes tipos de elementos (que se pueden filtrar según el registro, la información, el error o la advertencia) y no causarán errores cuando la consola no esté disponible. Estas funciones funcionarán en las consolas Firebug y Chrome.