Como imprimir as mensagens de depuração na consola de JavaScript do Google Chrome?

Como é que imprimo mensagens de depuração na consola de JavaScript do Google Chrome?

por favor, note que a consola de JavaScript não é a mesma que o Depurador de JavaScript; eles têm sintaxes AFAIK diferentes, por isso o comando print no Depurador de JavaScript não irá funcionar aqui. Na consola de JavaScript, print() irá enviar o parâmetro para a impressora.

Author: Peter Mortensen, 2008-10-20

15 answers

Executando o seguinte código a partir da barra de endereços do navegador:

javascript: console.log(2);

Imprime com sucesso a mensagem para a "consola JavaScript" no Google Chrome.

 600
Author: Sergey Ilinsky, 2008-10-20 10:20:23

Melhorando a ideia do Andru, você pode escrever um script que cria funções de consola se elas não existirem:

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

Então, use qualquer um dos seguintes:

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

Estas funções irão registar diferentes tipos de itens (que podem ser filtrados com base no registo, informação, erro ou aviso) e não irão causar erros quando a consola não estiver disponível. Estas funções funcionarão nos consoles Firebug e Chrome.

 167
Author: Delan Azabani, 2010-05-03 11:01:31

Basta adicionar uma funcionalidade fixe que muitos programadores sentem falta:

console.log("this is %o, event is %o, host is %s", this, e, location.host);
Este é o conteúdo mágico de um objeto JavaScript. %s foi mostrado apenas para um registro.

Também isto é fixe:

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

Que dá um traço de pilha semelhante a Java ao ponto da Invocação {[[6]} (incluindo a localização do ficheiro e o número da linha !).

Ambos %o e {[8] } estão disponíveis em cromado e Firefox!

Também para pilhas de vestígios na utilização do Firefox:

console.trace();

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

Boa pirataria!

UPDATE : algumas bibliotecas são escritas por pessoas más que redefinem o objeto console para seus próprios propósitos. Para repor o navegador Original console após carregar a biblioteca, use:

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

Ver a questão do excesso de fluxo da pilha a restaurar consola.registo().

 47
Author: gavenkoa, 2017-05-23 12:17:58

Apenas um aviso rápido-se você quiser testar no Internet Explorer sem remover toda a consola.log()'s, você vai precisar usar Firebug Lite ou você vai ter alguns erros não particularmente amigáveis.

(ou criar o seu próprio console.log () que apenas devolve falso.)

 17
Author: Andru, 2015-12-20 11:16:04

Aqui está um script curto que verifica se a consola está disponível. Se não estiver, Ele tenta carregar Firebug e se Firebug não estiver disponível ele carrega Firebug Lite. Agora você pode usar console.log em qualquer navegador. Aproveite!

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.
}
 17
Author: Vegar, 2015-12-20 11:18:44

Além da resposta de Delan Azabani , gosto de partilhar o meu console.js, e uso para o mesmo propósito. Eu crio um console noop usando um array de nomes de funções, o que na minha opinião é uma maneira muito conveniente de fazer isso, e eu cuidei do Internet Explorer, que tem uma função console.log, mas não 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
Author: Tim Büthe, 2017-05-23 12:02:41

Ou use esta função:

function log(message){
    if (typeof console == "object") {
        console.log(message);
    }
}
 12
Author: Tarek Saied, 2015-12-20 11:25:00
Aqui está a minha aula de papel de console. Dá-me a saída do escopo também para tornar a vida mais fácil. Observe o uso de localConsole.debug.call() para que localConsole.debug corra no âmbito da classe chamadora, proporcionando acesso ao seu 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();

Isto dá uma saída como esta em Firebug:

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

Ou Cromados:

In scope of someClass.someFunc(), obj:
Object
cat: "hat"
dr: "zeus"
__proto__: Object
 7
Author: Bruce, 2015-12-20 11:24:24

Pessoalmente uso isto, que é semelhante ao 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){}
}

O ponto principal é que é uma boa ideia pelo menos ter alguma prática de registro, além de apenas colar {[[1]} em seu código JavaScript, porque se você esquecer sobre isso, e está em um local de produção, ele pode potencialmente quebrar todo o código JavaScript para essa página.

 6
Author: cwd, 2015-12-20 11:26:04

Você poderia usar console.log() se você tiver um código depurado em que editor de software de programação você tem e você verá o resultado provavelmente o melhor editor para mim (Google Chrome). Basta carregar em F12 e carregar na página da consola. Você verá o resultado. Feliz código. :)

 4
Author: stryker, 2015-12-20 11:26:28
Tive muitos problemas com os programadores a verificar a consola.() financeiro. E, eu realmente não gosto de debugging Internet Explorer, apesar das melhorias fantásticas deInternet Explorer 10 eVisual Studio 2012 , etc. Então, sobrepus o objecto da consola... Eu adicionei uma bandeira _ _ localhost que só permite declarações de consola quando em localhost. Eu também adicionei console.() funções do Internet Explorer (que exibe um alerta) Sim).
// 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));
            }
        }
    };
})();

Exemplo de Utilização:

    console.log("hello");

Cromado / Firefox:

    prints hello in the console window.

Internet Explorer:

    displays an alert with 'hello'.
Para aqueles que olham de perto para o código, vão descobrir a consola.função examine (). Eu criei isso anos atrás para que eu possa deixar o código de depuração em certas áreas ao redor do produto para ajudar a resolver problemas QA/problemas do cliente. Por exemplo, eu deixaria a seguinte linha em algum código lançado:
    function doSomething(arg1) {
        // ...
        console.examine("someLabel", arg1);
        // ...
    }

E, em seguida, a partir do produto liberado, tipo o seguinte na consola (ou barra de endereço prefixada com ' javascript:'):

    top.__examine_someLabel = true;
Então, vou ver toda a consola registada.examinar () declarações. Tem sido uma ajuda fantástica muitas vezes.
 4
Author: kodybrown, 2015-12-20 11:32:55

Simple Internet Explorer 7 and below shim that preserves line numbering for other browsers:

/* Console shim */
(function () {
    var f = function () {};
    if (!window.console) {
        window.console = {
            log:f, info:f, warn:f, debug:f, error:f
        };
    }
}());
 3
Author: dbrin, 2015-12-20 11:34:28
console.debug("");

Usando este método imprime o texto de uma cor azul brilhante na consola.

enter image description here

 2
Author: Nicholas Smith, 2016-02-12 08:12:25

Melhorar ainda mais as ideias de Delan e Andru (razão pela qual esta resposta é uma versão editada); console.log é provável que exista enquanto as outras funções não podem, por isso tem o mapa padrão para a mesma função que console.log....

Pode escrever um programa que cria funções de consola se estas não existirem:

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

Então, use qualquer um dos seguintes:

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

Estas funções irão registar diferentes tipos de itens (que podem ser filtrados com base no registo, informação, erro ou avisar) e não causará erros quando a consola não estiver disponível. Estas funções funcionarão nos consoles Firebug e Chrome.

 1
Author: vogomatix, 2014-05-20 14:51:04

Mesmo que esta pergunta seja antiga, e tenha boas respostas, eu quero fornecer uma atualização sobre outras capacidades de registro.

Também pode imprimir com grupos:

console.group("Main");
console.group("Feature 1");
console.log("Enabled:", true);
console.log("Public:", true);
console.groupEnd();
console.group("Feature 2");
console.log("Enabled:", false);
console.warn("Error: Requires auth");
console.groupEnd();

Que imprime:

enter image description here

Isto é suportado por todos os navegadores principais de acordo com esta página : enter image description here

 0
Author: Daniel, 2021-01-26 18:03:49