Como imprimo mensagens de depuração no console do Google Chrome JavaScript?

466

Como imprimo mensagens de depuração no console do Google Chrome JavaScript?

Observe que o JavaScript Console não é o mesmo que o JavaScript Debugger; eles têm sintaxes diferentes do AFAIK; portanto, o comando print no JavaScript Debugger não funcionará aqui. No console do JavaScript, print()o parâmetro será enviado para a impressora.

Tamas Czinege
fonte

Respostas:

597

Executando o seguinte código na barra de endereços do navegador:

javascript: console.log (2);

imprime com êxito a mensagem no "Console JavaScript" no Google Chrome.

Sergey Ilinsky
fonte
13
Acabei de perceber, console.log()é incrível para depuração de js ... muitas vezes esqueço de usá-lo na prática.
Ish 29/07
Quanto tempo pode ter uma dessas "saídas"? Upvote a propósito, este foi realmente útil
nbura
3
@dbrin isso é bom para o desenvolvimento, no entanto, qualquer console.log()código deve ser removido do código de produção antes da implantação.
Samuel MacLachlan
2
Os @Sebas Console.Logdevem ser removidos do código de produção antes da implantação, pois, caso contrário, essas mensagens serão registradas no console JavaScript dos usuários. Embora seja improvável que eles o vejam, está ocupando espaço na memória do dispositivo. Além disso, dependendo do conteúdo do Log, você está potencialmente dizendo às pessoas como hackear / fazer engenharia reversa do seu aplicativo.
Samuel MacLachlan
166

Melhorando a idéia de Andru, você pode escrever um script que crie funções de console 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(){};

Em seguida, use um dos seguintes:

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

Essas funções registram diferentes tipos de itens (que podem ser filtrados com base no log, informações, erro ou aviso) e não causam erros quando o console não está disponível. Essas funções funcionarão nos consoles Firebug e Chrome.

Delan Azabani
fonte
Obrigado por isso. O código não seria mais rígido se você executasse o "if" uma vez, como if (!window.console) {e depois colocasse tudo entre colchetes? No momento, você está avaliando o mesmo material quatro vezes.
Dan Rosenstark 19/09/11
Não, b / c apenas ter window.console não garante que você terá um window.console.log ou .warn & c
Paul
18
Apenas tome cuidado, pois se esse script for carregado com a página e a janela do console não estiver aberta, ele criará o console 'fictício', que poderá impedir o funcionamento do console real se você abrir o console após o carregamento da página. (pelo menos é esse o caso em versões mais antigas do Firefox / Firebug e cromo)
cwd
1
Eu tenho adições a este, ver minha resposta abaixo
Tim Buthe
1
Não, isso não fará o chrome abortar com um TypeError. A questão vinculada acima é sobre ligar com isso . O código acima não faz isso e vai funcionar muito bem no Chrome
gman
47

Basta adicionar um recurso interessante que muitos desenvolvedores perdem:

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

Esse é o conteúdo clicável e de navegação profunda de%o despejo mágico de um objeto JavaScript. foi mostrado apenas para um registro.%s

Também isso é legal também:

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

O que fornece um rastreamento de pilha semelhante ao Java até o ponto da new Error()chamada (incluindo o caminho para o arquivo e o número da linha !).

Ambos %oe new Error().stackestão disponíveis no Chrome e Firefox!

Também para rastreamentos de pilha no Firefox, use:

console.trace();

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

Feliz hacking!

ATUALIZAÇÃO : Algumas bibliotecas são escritas por pessoas más que redefinem o consoleobjeto para seus próprios propósitos. Para restaurar o navegador original consoleapós carregar a biblioteca, use:

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

Consulte a pergunta Estouro de pilha Restaurando console.log () .

gavenkoa
fonte
3
Outro que eu acabei de descobrir: console.dir developer.mozilla.org/pt-BR/docs/Web/API/console.dir
dbrin 31/10/2013
17

Apenas um aviso rápido - se você quiser testar no Internet Explorer sem remover todos os console.log (), precisará usar o Firebug Lite ou obterá alguns erros não muito amigáveis.

(Ou crie seu próprio console.log (), que retorna apenas false.)

Andru
fonte
2
I evitar erros de cross browser como tal: se console.log (console) ()
Craig Wohlfeil
Se você abrir as ferramentas do desenvolvedor no IE (F12), o consoleobjeto será criado e existirá até você fechar a instância do navegador.
Tim Büthe
17

Aqui está um script curto que verifica se o console está disponível. Caso contrário, ele tenta carregar o Firebug e, se não estiver disponível, carrega o Firebug Lite. Agora você pode usar console.logem qualquer navegador. Aproveitar!

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
fonte
14

Além da resposta de Delan Azabani , gosto de compartilhar a minha console.jse uso com a mesma finalidade. Criei um console noop usando uma matriz de nomes de funções, o que, na minha opinião, é uma maneira muito conveniente de fazer isso, e cuidei do Internet Explorer, que tem uma console.logfunção, 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() {};
  }
}
Tim Büthe
fonte
12

Ou use esta função:

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

Aqui está a minha classe de wrapper de console. Isso também me dá uma saída de escopo para facilitar a vida. Observe o uso de localConsole.debug.call()para que seja localConsole.debugexecutado no escopo da classe de chamada, fornecendo acesso ao seu 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();

Isso fornece uma saída assim no Firebug :

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

Ou Chrome:

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

Pessoalmente, eu uso isso, 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 idéia, pelo menos, ter alguma prática de logar além de simplesmente aderir console.log()diretamente ao seu código JavaScript, porque se você se esquecer, e estiver em um site de produção, poderá potencialmente quebrar todo o código JavaScript para essa página.

cwd
fonte
por que não if(windows.console) console.log(msg)?
CJStuart
window.consoleVocê quer dizer. a única vez em que a tentativa seria útil seria se um erro fosse lançado (se console.log não fosse uma função) desde que o console foi redefinido. Fazer window.console && window.console.log instanceof Functionseria mais útil.
Aram Kocharyan
4

Você pode usar console.log()se tiver um código depurado em qual editor de software de programação possui e verá a saída provavelmente o melhor editor para mim (Google Chrome). Basta pressionar F12e pressionar a guia Console. Você verá o resultado. Feliz codificação. :)

stryker
fonte
4

Eu tive muitos problemas com os desenvolvedores que estavam verificando suas declarações de console. (). E realmente não gosto de depurar o Internet Explorer, apesar das melhorias fantásticas do Internet Explorer 10 e Visual Studio 2012 , etc.

Então, eu substituí o próprio objeto do console ... Adicionei um sinalizador __localhost que permite apenas instruções do console no host local. Também adicionei funções de console. () Ao Internet Explorer (que exibe um alerta ()).

// 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 uso:

    console.log("hello");

Chrome / Firefox:

    prints hello in the console window.

Internet Explorer:

    displays an alert with 'hello'.

Para quem olha atentamente para o código, você descobrirá a função console.examine (). Eu criei isso anos atrás para poder deixar o código de depuração em certas áreas do produto para ajudar a solucionar problemas de controle de qualidade / clientes. Por exemplo, eu deixaria a seguinte linha em algum código liberado:

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

E, a partir do produto lançado, digite o seguinte no console (ou barra de endereço prefixada com 'javascript:'):

    top.__examine_someLabel = true;

Então, verei todas as instruções console.examine () registradas. Tem sido uma ajuda fantástica muitas vezes.

wasatchwizard
fonte
Obrigado por esta ideia maravilhosa. Foi bastante inspirador. Na sua função de examinar, involuntariamente, passei à ideia de escopo para depuração de php. mydebug_on ('somescope'), mydebug ('somescope', $ data) etc. Agora posso ativar / desativar a depuração seletiva de assunto e o registro de código php. E, assim como os programas linux regulares, ele pode fazer login em um sabor normal, etc. Uma ótima idéia de fato!
Johan
3

Simples Internet Explorer 7 e abaixo calço que preserva a linha numeração para outros navegadores:

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

O uso desse método imprime o texto em uma cor azul brilhante no console.

insira a descrição da imagem aqui

Nicholas Smith
fonte
1

Melhorando ainda mais as idéias de Delan e Andru (razão pela qual esta resposta é uma versão editada); É provável que o console.log exista enquanto as outras funções não existirem, portanto, tenha o mapa padrão para a mesma função que o console.log ....

Você pode escrever um script que crie funções de console se elas 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

Em seguida, use um dos seguintes:

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

Essas funções registram diferentes tipos de itens (que podem ser filtrados com base no log, informações, erro ou aviso) e não causam erros quando o console não está disponível. Essas funções funcionarão nos consoles Firebug e Chrome.

vogomatix
fonte