Agora estou desenvolvendo um aplicativo e coloque um isDebug
switch global . Gostaria de embrulhar console.log
para uso mais conveniente.
//isDebug controls the entire site.
var isDebug = true;
//debug.js
function debug(msg, level){
var Global = this;
if(!(Global.isDebug && Global.console && Global.console.log)){
return;
}
level = level||'info';
Global.console.log(level + ': '+ msg);
}
//main.js
debug('Here is a msg.');
Então eu recebo esse resultado no console do Firefox.
info: Here is a msg. debug.js (line 8)
E se eu quiser registrar com o número da linha onde debug()
é chamado, como info: Here is a msg. main.js (line 2)
?
javascript
Rufus
fonte
fonte
console.log
informações,console.warn
avisos econsole.error
erros, em vez de adicionar algo porconsole.log
meio de uma função de wrapper.console
precisa ser usada. Para atingir esse objetivo, um invólucro parece ser o único caminho?Respostas:
Esta é uma pergunta antiga e todas as respostas fornecidas são excessivamente hackey, apresentam problemas principais no navegador e não fornecem nada de super útil. Essa solução funciona em todos os navegadores e relata todos os dados do console exatamente como deveriam. Não são necessários hacks e uma linha de código Confira o código de acesso .
Crie a opção assim:
Em seguida, basta ligar da seguinte maneira:
Você pode até assumir o console.log com um switch como este:
Se você quiser fazer algo útil com isso ... Você pode adicionar todos os métodos do console e agrupá-los em uma função reutilizável que fornece não apenas controle global, mas também o nível de classe:
Agora você pode adicioná-lo às suas aulas:
fonte
console.log
vincular duas vezes umalog()
função personalizada contendo duas chamadas paraconsole.log
, no entanto, os números de linha refletiriam a linhaconsole.log
na qual realmente reside, e não ondedebug.log
é chamada. No entanto, você pode fazer coisas como adicionar prefixos / sufixos dinâmicos etc. Também existem maneiras de compensar o problema do número da linha, mas acho que é outra pergunta. Confira este projeto em busca de um exemplo: github.com/arctelix/iDebugConsole/blob/master/README.mdthis.isDebug
parafalse
, não importará. Só não sei se há alguma maneira de contornar isso, talvez seja por design. Nesse sentido, oisDebug
argumento é bastante enganadorvar
e deve ser um poucoconst
.Gostei da resposta do @ fredrik , então juntei-a com outra resposta que divide o rastreamento da pilha do Webkit e a mesclei com o invólucro seguro do console.log do @ PaulIrish . "Padroniza" o
filename:line
objeto "especial" para que ele se destaque e tenha a mesma aparência no FF e no Chrome.Teste no violino: http://jsfiddle.net/drzaus/pWe6W/
Isso também funciona no nó e você pode testá-lo com:
fonte
console
métodos comowarn
,error
, etc - stackoverflow.com/a/14842659/1037948var line = stack.split('\n')[2];
-'undefined' is not an object
if(!stack) return '?'
ao método que falha, ao invés de onde ele é chamado (por isso, se alguém usa o método em si que está "protegido" também)Você pode manter os números de linha e gerar o nível do log com algum uso inteligente de
Function.prototype.bind
:Indo um passo adiante, você pode fazer uso das
console
distinções de erro / aviso / informação e ainda ter níveis personalizados. Tente!fonte
console.debug(...)
comfunction name
earguments
- quaisquer pensamentos sobre como fazer isso?%s
por%o
no Chrome imprimirá os parâmetros da maneira que você esperaria (objetos são expansíveis, números e seqüências de caracteres são coloridos etc.).De: como obter o número da linha de função do chamador JavaScript? Como obter o URL de origem do chamador JavaScript? o
Error
objeto possui uma propriedade de número de linha (em FF). Então, algo assim deve funcionar:No navegador Webkit, você possui
err.stack
uma sequência que representa a pilha de chamadas atual. Ele exibirá o número da linha atual e mais informações.ATUALIZAR
Para obter o número da roupa correto, é necessário chamar o erro nessa linha. Algo como:
fonte
new Error();
me dá o contexto em que ele é executado; se eu colocá-lodebug.js
, eu recebereiinfo: Here is a msg. file: http://localhost/js/debug.js line:7
.Log = Error
? Você ainda está modificando a classe Error, certo?Uma maneira de manter o número da linha está aqui: https://gist.github.com/bgrins/5108712 . É mais ou menos resumido a isso:
Você poderia envolver isso com
isDebug
e definirwindow.log
parafunction() { }
se você não está depurando.fonte
Você pode passar o número da linha para o seu método de depuração, assim:
Aqui,
(new Error).lineNumber
você forneceria o número da linha atual no seujavascript
código.fonte
O Chrome Devtools permite alcançar isso com o Blackboxing . Você pode criar o wrapper console.log que pode ter efeitos colaterais, chamar outras funções, etc., e ainda manter o número da linha que chamou a função de wrapper.
Basta colocar um pequeno wrapper console.log em um arquivo separado, por exemplo
Nomeie algo como log-blackbox.js
Em seguida, vá para as configurações do Chrome Devtools e localize a seção "Caixa preta", adicione um padrão para o nome do arquivo que você deseja colocar na caixa preta, nesse caso log-blackbox.js
fonte
Encontrei uma solução simples para combinar a resposta aceita (vinculação ao console.log / error / etc) com alguma lógica externa para filtrar o que realmente está registrado.
Uso:
console.assert
usa o log condicional.fonte
Se você simplesmente deseja controlar se a depuração é usada e tem o número de linha correto, você pode fazer isso:
Quando você precisar acessar para depurar, faça o seguinte:
Se
isDebug == true
, os números de linha e nomes de arquivos mostrados no console estarão corretos, porquedebug.log
etc é realmente um alias deconsole.log
etc.Se
isDebug == false
, nenhuma mensagem de depuração é mostrada, porquedebug.log
etc simplesmente não faz nada (uma função vazia).Como você já sabe, uma função de invólucro irá atrapalhar os números de linha e nomes de arquivos, portanto, é uma boa idéia evitar o uso de funções de invólucro.
fonte
isDebug = true
edebug.js
, mas essa resposta funciona!window.debug = window.console
seria um pouco mais limpo.isDebug == false
. : {isDebug===true
. Ou evento para isso: jsfiddle.net/fredrik/x6Jw5As soluções de rastreamento de pilha exibem o número da linha, mas não permitem clicar para ir para a origem, o que é um grande problema. A única solução para manter esse comportamento é vincular à função original.
A ligação impede incluir lógica intermediária, porque essa lógica interferiria nos números de linha. No entanto, redefinindo as funções associadas e jogando com a substituição de cadeias de console , ainda é possível um comportamento adicional.
Esta lista mostra uma estrutura de registro minimalista que oferece módulos, níveis de registro, formatação e números de linhas clicáveis adequados em 34 linhas. Use-o como base ou inspiração para suas próprias necessidades.
EDIT: essência incluída abaixo
fonte
A ideia com o bind
Function.prototype.bind
é brilhante. Você também pode usar o npm library lines-logger . Ele mostra os arquivos de origem:Crie qualquer logger uma vez no seu projeto:
Imprimir registros:
fonte
Aqui está uma maneira de manter suas
console
instruções de log existentes enquanto adiciona um nome de arquivo e número de linha ou outras informações de rastreamento de pilha na saída:Em seguida, use-o assim:
Isso funciona no Firefox, Opera, Safari, Chrome e IE 10 (ainda não testado no IE11 ou Edge).
fonte
my test log message (myscript.js:42) VM167 mypage.html:15
, que não é tão boa de ler e não está vinculada. Ainda bom trabalho, portanto, um voto positivo.Isso vai me dar
info: "Here is a msg." main.js(line:2)
.Mas o extra
eval
é necessário, pena.fonte
Código de http://www.briangrinstead.com/blog/console-log-helper-function :
fonte
log
é chamadoUltimamente, estive analisando esse problema. Precisava de algo muito simples para controlar o log, mas também para reter os números de linha. Minha solução não parece tão elegante no código, mas fornece o que é necessário para mim. Se alguém for cuidadoso o suficiente com fechamentos e retenção.
Adicionei um pequeno invólucro ao início do aplicativo:
Para que mais tarde eu possa simplesmente fazer:
Eu testei o firefox e o crome, e os dois navegadores parecem mostrar o log do console como pretendido. Se você preencher assim, sempre poderá estender o método 'd' e passar outros parâmetros para ele, para que ele possa fazer algum log extra.
Ainda não encontrei nenhuma desvantagem séria para minha abordagem, exceto a linha feia no código para registro.
fonte
aqui estava a minha solução sobre esta questão. quando você chama o método: log, ele imprime o número da linha em que você imprime seu log
fonte
Uma pequena variação é fazer com que debug () retorne uma função, que é executada onde você precisa - debug (message) (); e mostra adequadamente o número da linha e o script de chamada corretos na janela do console, permitindo variações como redirecionar como alerta ou salvar no arquivo.
Como ele retorna uma função, essa função precisa ser executada na linha de depuração com () ;. Em segundo lugar, a mensagem é enviada para a função de depuração, e não para a função retornada, permitindo o pré-processamento ou a verificação de que você pode precisar, como verificar o estado do nível do log, tornar a mensagem mais legível, ignorando tipos diferentes ou apenas relatando itens atender aos critérios de nível de log;
fonte
Você pode simplificar a lógica aqui. Isso pressupõe que seu sinalizador de depuração global NÃO seja dinâmico e definido no carregamento do aplicativo ou passado como alguma configuração. Destina-se a ser usado para sinalização de ambiente (por exemplo, imprimir apenas no modo dev e não na produção)
JS de baunilha:
ES6:
Módulo:
Angular 1.x:
Tudo o que você precisa fazer agora é substituir todas as referências de console pelo Logger
fonte
Esta implementação é baseada na resposta selecionada e ajuda a reduzir a quantidade de ruído no console de erros: https://stackoverflow.com/a/32928812/516126
fonte
Eu achei algumas das respostas para esse problema um pouco complexas para minhas necessidades. Aqui está uma solução simples, renderizada em Coffeescript. É adaptado da versão de Brian Grinstead aqui
Ele assume o objeto de console global.
fonte
A maneira que resolvi foi criar um objeto, criar uma nova propriedade no objeto usando Object.defineProperty () e retornar a propriedade do console, que foi usada como função normal, mas agora com a capacidade estendida.
Em seguida, para definir uma propriedade, basta ...
E agora você pode usar sua função como
fonte
Com base em outras respostas (principalmente no @arctelix one), criei isso para o Nó ES6, mas um teste rápido também mostrou bons resultados no navegador. Estou apenas passando a outra função como referência.
fonte
Aqui está a minha função de logger (com base em algumas das respostas). Espero que alguém possa fazer uso dele:
Exemplos:
fonte