Console.log colorido

às vezes, vários métodos de registro de console log, info, errore warnsimplesmente não são suficientes, especialmente quando você está depurando uma aplicação enorme com toneladas de toras acontecendo no console do navegador

no Firebug, você pode aplicar seu próprio estilo à mensagem de log, prefixando a mensagem com %csinalizador e fornecer uma string de propriedades de estilo css como um segundo parâmetro para o método de log da seguinte maneira:

console.log('%c the green hulk got mad!', 'color: green; font-weight: bold;');

Cenário

estilo extra

console.log('%c a colorful message', 'background: green; color: white; display: block;');

Cenário

Indo mais longe

você pode querer criar seu próprio conjunto de métodos de registro, cada cor para um componente / módulo específico em seu aplicativo, então sempre que uma mensagem colorida aparecer, você saberá a qual parte ela está relacionada

Cenário

CSS3?

sim, você pode incrementar suas mensagens com algumas maravilhas CSS3

var styles = [
'background: linear-gradient(#D33106, #571402)'
, 'border: 1px solid #3E0E02'
, 'color: white'
, 'display: block'
, 'text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)'
, 'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 5px 3px -5px rgba(0, 0, 0, 0.5), 0 -13px 5px -10px rgba(255, 255, 255, 0.4) inset'
, 'line-height: 40px'
, 'text-align: center'
, 'font-weight: bold'
].join(';');

console
.log('%c a spicy log message ?', styles);

Cenário

Compatibilidade do navegador

  • atualmente você pode fazer isso no Firefox usando o plugin Firebug
  • nas ferramentas de desenvolvedor do Chrome Canary, em breve estará disponível no canal estável do Chrome