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




preserve log chrome (12)

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.


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.


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

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

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

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

Você pode escrever um script que crie funções do 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 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.


Aqui está minha classe de wrapper de console. Isso me dá a saída do escopo para facilitar a vida. Observe o uso de localConsole.debug.call() para que localConsole.debug executado no escopo da classe de chamada, fornecendo 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á 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

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

Ou use esta função:

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

Eu tive muitos problemas com os desenvolvedores checando suas instruções no console. E eu realmente não gosto de depurar o Internet Explorer, apesar das melhorias fantásticas do Internet Explorer 10 e do Visual Studio 2012 , etc.

Portanto, eu substituí o próprio objeto de console ... Eu adicionei um sinalizador __localhost que permite apenas instruções de console quando em localhost. Eu também adicionei as funções 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 aqueles que olham atentamente para o código, você descobrirá a função console.examine (). Eu criei este ano para que eu possa deixar o código de depuração em certas áreas em torno do produto para ajudar a solucionar problemas de QA / cliente. 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 na barra de endereço prefixada com 'javascript:'):

    top.__examine_someLabel = true;

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


console.debug("");

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


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


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.





google-chrome