javascript - network - preserve log chrome




Como faço para imprimir mensagens de depuração no Console JavaScript do Google Chrome? (10)

Além da resposta de Delan Azabani , gosto de compartilhar meu console.js e uso para o mesmo propósito. Eu crio um console noop usando uma matriz de nomes de função, o que é, na minha opinião, uma maneira muito conveniente de fazer isso, e 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() {};
  }
}

Como faço para imprimir mensagens de depuração no Console JavaScript do Google Chrome?

Por favor, note que o Console JavaScript não é o mesmo que o Depurador de JavaScript; eles têm diferentes sintaxes AFAIK, portanto, o comando de impressão no Depurador de JavaScript não funcionará aqui. No Console JavaScript, print() enviará o parâmetro para a impressora.


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

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


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

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

Basta adicionar um recurso interessante que muitos desenvolvedores não percebem:

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

Este é o conteúdo mágico que pode ser clicado e navegável por %o dump de um objeto JavaScript. %s foi mostrado apenas para um registro.

Também isso é legal também:

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

Que dá um rastreio de pilha semelhante a Java ao ponto da new Error() invocação new Error() (incluindo o caminho para o arquivo e o número da linha !).

Tanto %o quanto new Error().stack estão disponíveis no Chrome e no Firefox!

Também para rastreamentos de pilha no uso do Firefox:

console.trace();

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

Hacker feliz!

UPDATE : Algumas bibliotecas são escritas por pessoas más que redefinem o objeto console para seus próprios propósitos. Para restaurar o console original do navegador depois de carregar a biblioteca, use:

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

Veja a pergunta sobre estouro de pilha Restaurando console.log () .


Executando o código a seguir na barra de endereço do navegador:

javascript: console.log(2);

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


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

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

Essas funções registrarão diferentes tipos de itens (que podem ser filtrados com base em log, info, error ou warn) e não causarão erros quando o console não estiver disponível. Essas funções funcionarão nos consoles do Firebug e do Chrome.


Ou use esta função:

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

Pessoalmente eu uso isso, que é semelhante ao de 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 ter pelo menos alguma prática de fazer log além de simplesmente manter o console.log() no seu código JavaScript, porque se você esquecê-lo e ele estiver em um site de produção, ele pode potencialmente quebrar todo o código JavaScript para essa página.


Você poderia usar o console.log() se você tem um código depurado no editor de software de programação que você tem e você verá a saída provavelmente o melhor editor para mim (Google Chrome). Basta pressionar F12 e pressionar a guia Console. Você verá o resultado. Codificação feliz. :)


console.debug("");

Usando este método imprime o texto em uma cor azul brilhante no console.





google-chrome