Come faccio a stampare i messaggi di debug nella Console JavaScript di Google Chrome?

Come faccio a stampare i messaggi di debug nella Console JavaScript di Google Chrome?

Si noti che la console JavaScript non è la stessa del debugger JavaScript; hanno diverse sintassi AFAIK, quindi il comando di stampa in JavaScript Debugger non funzionerà qui. Nella console JavaScript, print()invierà il parametro alla stampante.

Eseguendo il seguente codice dalla barra degli indirizzi del browser:

javascript: console.log (2);

stampa correttamente il messaggio sulla "Console JavaScript" in Google Chrome.

Migliorando l'idea di Andru, puoi scrivere uno script che crea funzioni console se non esistono:

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

Quindi, utilizzare uno dei seguenti:

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

Queste funzioni registreranno diversi tipi di elementi (che possono essere filtrati in base a registro, informazioni, errore o avviso) e non causeranno errori quando la console non è disponibile. Queste funzioni funzioneranno nelle console Firebug e Chrome.

Basta aggiungere una funzionalità interessante che molti sviluppatori mancano:

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

Questo è il %odump magico cliccabile e navigabile in profondità di un oggetto JavaScript. %sè stato mostrato solo per un disco.

Anche questo è bello:

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

Il che fornisce una traccia dello stack simile a Java fino al punto new Error()dell'invocazione (incluso il percorso del file e il numero di riga !).

Entrambi %oe new Error().stacksono disponibili in Chrome e Firefox!

Anche per le tracce dello stack in Firefox utilizzare:

console.trace();

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

Happy hacking!

AGGIORNAMENTO : Alcune librerie sono scritte da persone cattive che ridefiniscono l' consoleoggetto per i propri scopi. Per ripristinare il browser originale consoledopo aver caricato la libreria, utilizzare:

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

Vedere la domanda Stack Overflow Ripristino console.log () .

Solo un breve avviso: se vuoi testare in Internet Explorer senza rimuovere tutti i file console.log (), dovrai usare Firebug Lite o otterrai alcuni errori non particolarmente amichevoli.

(O crea il tuo console.log () che restituisce semplicemente false.)

Ecco uno script breve che controlla se la console è disponibile. In caso contrario, prova a caricare Firebug e se Firebug non è disponibile carica Firebug Lite. Ora puoi usarlo console.login qualsiasi browser. Godere!

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

Oltre alla risposta di Delan Azabani , mi piace condividere la mia console.jse lo uso per lo stesso scopo. Creo una console noop usando una matrice di nomi di funzioni, qual è secondo me un modo molto conveniente per farlo, e mi sono occupato di Internet Explorer, che ha una console.logfunzione, ma 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() {};
  }
}

Oppure usa questa funzione:

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

Ecco la mia classe wrapper per console. Mi dà anche l'output dell'ambito per semplificare la vita. Si noti l'uso di localConsole.debug.call()così che localConsole.debugviene eseguito nell'ambito della classe chiamante, fornendo l'accesso al suo toStringmetodo.

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

Questo dà un output simile in Firebug :

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

O Chrome:

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

Personalmente lo uso, che è simile a quello di 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){}
}

Il punto principale è che è una buona idea avere almeno qualche pratica di registrazione diversa da quella di attaccare console.log()direttamente il tuo codice JavaScript, perché se lo dimentichi, ed è su un sito di produzione, può potenzialmente rompere tutto il codice JavaScript per quella pagina.

Potresti usare console.log()se hai un codice di debug in quale editor di software di programmazione hai e vedrai l'output probabilmente il miglior editor per me (Google Chrome). Basta premere F12e premere la scheda Console. Vedrai il risultato. Buona codifica. :)

Ho avuto molti problemi con gli sviluppatori che hanno verificato le loro consolle. () Dichiarazioni. E davvero non mi piace il debug di Internet Explorer, nonostante i fantastici miglioramenti di Internet Explorer 10 e Visual Studio 2012 , ecc.

Quindi, ho ignorato l'oggetto console stesso ... Ho aggiunto un flag __localhost che consente le istruzioni console solo su localhost. Ho anche aggiunto le funzioni console. () A Internet Explorer (che visualizza invece un avviso ()).

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

Esempio di utilizzo:

    console.log("hello");

Chrome / Firefox:

    prints hello in the console window.

Internet Explorer:

    displays an alert with 'hello'.

Per coloro che osservano attentamente il codice, scoprirai la funzione console.examine (). Ho creato questi anni fa in modo da poter lasciare il codice di debug in alcune aree intorno al prodotto per aiutare a risolvere i problemi di QA / clienti. Ad esempio, lascerei la seguente riga in un codice rilasciato:

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

E quindi dal prodotto rilasciato, digitare quanto segue nella console (o barra degli indirizzi con il prefisso 'javascript:'):

    top.__examine_someLabel = true;

Quindi, vedrò tutte le istruzioni console.examine () registrate. È stato un grande aiuto molte volte.

Semplice spessore di Internet Explorer 7 e versioni precedenti che preserva la numerazione delle righe per altri browser:

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

console.debug("");

L'uso di questo metodo stampa il testo in un colore blu brillante nella console.

Migliorare ulteriormente le idee di Delan e Andru (motivo per cui questa risposta è una versione modificata); È probabile che console.log esista mentre le altre funzioni potrebbero non esserlo, quindi la mappa predefinita deve avere la stessa funzione di console.log ....

Puoi scrivere uno script che crei le funzioni della console se non esistono:

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

Quindi, utilizzare uno dei seguenti:

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

Queste funzioni registreranno diversi tipi di elementi (che possono essere filtrati in base a registro, informazioni, errore o avviso) e non causeranno errori quando la console non è disponibile. Queste funzioni funzioneranno nelle console Firebug e Chrome.