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

466

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

Tamas Czinege
fuente

Respuestas:

597

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.

Sergey Ilinsky
fuente
13
Acabo de darme cuenta, console.log()es increíble para la depuración de js ... A menudo olvido usarlo en la práctica.
Ish
¿Cuánto tiempo puede durar una de estas "salidas"? Voto a favor, por cierto, esto fue realmente útil
nbura
3
@dbrin esto está bien para el desarrollo, sin embargo, cualquier console.log()código debe eliminarse del código de producción antes de la implementación.
Samuel MacLachlan
2
Los @Sebas Console.Logdeben eliminarse del código de producción antes de la implementación porque, de lo contrario, estos mensajes se registrarán en la consola JavaScript de sus usuarios. Si bien es poco probable que lo vean, está ocupando espacio en la memoria de su dispositivo. Además, dependiendo del contenido del Registro, potencialmente le está diciendo a la gente cómo piratear / aplicar ingeniería inversa a su aplicación.
Samuel MacLachlan
166

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.

Delan Azabani
fuente
Gracias por eso. ¿No sería más estricto el código si ejecuta el "si" una vez, como if (!window.console) {y luego pone todo entre paréntesis? En este momento estás evaluando las mismas cosas cuatro veces.
Dan Rosenstark
No, b / c solo con window.console no garantiza que tendrá un window.console.log o .warn & c
Paul
18
Solo tenga cuidado porque si este script se carga con la página y la ventana de la consola no está abierta, creará la consola 'ficticia' que puede evitar que la consola real funcione si abre la consola después de cargar la página. (al menos este es el caso en versiones anteriores de firefox / firebug y chrome)
cwd
1
Tengo adiciones a esto, vea mi respuesta a continuación
Tim Büthe
1
No, esto no hará que Chrome cancele con un TypeError. La pregunta vinculada anteriormente se trata de llamar con esto . El código anterior no hace eso y funcionará bien en Chrome
gman
47

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

gavenkoa
fuente
3
Otro que acabo de descubrir: console.dir developer.mozilla.org/en-US/docs/Web/API/console.dir
dbrin
17

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

Andru
fuente
2
Evito
Si abre las herramientas de desarrollador en IE (F12), el consoleobjeto se crea y existe hasta que cierre esa instancia del navegador.
Tim Büthe
17

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.
}
Vegar
fuente
14

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() {};
  }
}
Tim Büthe
fuente
12

O use esta función:

function log(message){
    if (typeof console == "object") {
        console.log(message);
    }
}
Tarek Saied
fuente
console.constructor === Object && (log = m => console.log(m))
Josh Habdas
7

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
Bruce
fuente
6

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

cwd
fuente
¿por qué no if(windows.console) console.log(msg)?
CJStuart
window.consoleQuiere decir. la única vez que el intento sería útil es si se arrojó un Error (si console.log no era una función) desde que se redefinió la consola. Hacer window.console && window.console.log instanceof Functionsería más útil.
Aram Kocharyan
4

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 :)

stryker
fuente
4

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.

wasatchwizard
fuente
Gracias por esta maravillosa idea. Fue muy inspirador. Desde su función de examen, sin saberlo, pasé a la idea del alcance para depurar php. mydebug_on ('somescope'), mydebug ('somescope', $ data), etc. Ahora puedo activar / desactivar la depuración selectiva del sujeto y el registro de código php. Y al igual que los programas regulares de Linux, puede iniciar sesión en un sabor estándar regular detallado, etc. ¡Qué buena idea!
Johan
3

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
        };
    }
}());
dbrin
fuente
2
console.debug("");

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

ingrese la descripción de la imagen aquí

Nicholas Smith
fuente
1

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.

vogomatix
fuente