javascript - significa - trucos con la consola de chrome




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

¿Cómo imprimo mensajes de depuración en la Consola de 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.


Además de la respuesta de Delan Azabani , me gusta compartir mi console.js , y 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 ocupé de Internet Explorer, que tiene una función console.log , 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() {};
  }
}

Aquí está mi clase envoltura consola. Me da un alcance de salida también para hacer la vida más fácil. Tenga en cuenta el uso de localConsole.debug.call() para que localConsole.debug ejecute en el ámbito de la clase de llamada, proporcionando acceso a su método toString .

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 tal 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

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.


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

Por lo tanto, he anulado el objeto de la consola en sí ... He agregado un indicador __localhost que solo permite sentencias 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 observan detenidamente el código, descubrirán la función console.examine (). Creé esto hace años para poder dejar el código de depuración en ciertas áreas alrededor del producto para ayudar a solucionar problemas de QA / clientes. 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 publicado, escriba lo siguiente en la consola (o barra de direcciones con el prefijo 'javascript:'):

    top.__examine_someLabel = true;

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


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 pueden filtrarse según el registro, información, error o advertencia) y no causarán errores cuando la consola no esté disponible. Estas funciones funcionarán en consolas Firebug y Chrome.


O usa esta función:

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

Podría usar console.log() si tiene un código de depuración en el editor de software de programación que tiene y verá que es probable que sea el mejor editor para mí (Google Chrome). Solo presiona F12 y presiona la pestaña de la consola. Verás el resultado. Feliz codificacion :)


Simulador simple de Internet Explorer 7 e inferior que conserva la numeración de líneas para otros navegadores:

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

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

(O crea tu propia console.log () que simplemente devuelve falso).


console.debug("");

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





google-chrome