O console JavaScript interno do Chrome pode exibir cores?
Quero erros em vermelho, avisos em laranja e console.logverde. Isso é possível?
javascript
google-chrome
console
google-chrome-devtools
Randomblue
fonte
fonte
console.error()em vez deconsole.log...console.warn()também está disponível com um ícone laranja de 'aviso', embora o texto em si ainda esteja em preto.console.log("%c", "background: red;padding: 100000px;");causará um comportamento muito estranho no Chrome, especialmente ao rolar o console.Respostas:
No Chrome e Firefox (+31), você pode adicionar CSS nas
console.logmensagens:O mesmo pode ser aplicado para adicionar vários CSS ao mesmo comando.
Fonte do Google Chrome: Apresentação de Paul Irish e mudança do Webkit
Fonte do Firefox: Console da Web do Firefox - Mensagens de estilo
Referência da API do console do Chrome: referência da API do console
fonte
console.log('%c', 'padding:28px 119px;line-height:100px;background:url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6) no-repeat;');background: #444; color: #bada55; padding: 2px; border-radius:2pxtudo sobre o border-radiusAqui está um exemplo extremo com sombra do arco-íris.
fonte
Chrome 69, WIN7)Você pode usar uma folha de estilo personalizada para colorir seu depurador. Você pode inserir esse código
C:\Documents and Settings\<User Name>\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.cssse estiver no WinXP, mas o diretório varia de acordo com o sistema operacional.fonte
~/.config/google-chrome/Default/User\ StyleSheets/Custom.css~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css..console-message-textclasse. Além disso, as cores de fundo mais agradáveis que encontrei foram#ffece6erros,#fafad2avisos e#f0f9ffnormal.As versões anteriores do Chrome não permitem que
console.log()s seja exibido em uma cor específica programaticamente, mas a chamadaconsole.error()coloca umXícone vermelho nas linhas de erro e torna o texto vermelho, além deconsole.warn()um!ícone amarelo .Você pode filtrar as entradas do console com os botões Todos, Erros, Avisos e Logs abaixo do console.
Acontece que o Firebug suporta CSS personalizado para
console.logs desde 2010 e o suporte ao Chrome foi adicionado a partir do Chrome 24.Quando
%caparece em qualquer lugar do primeiro argumento , o próximo argumento é usado como CSS para estilizar a linha do console. Argumentos adicionais são concatenados (como sempre foi o caso).fonte
Eu escrevi template-colors-web https://github.com/icodeforlove/Console.js para nos permitir fazer isso um pouco mais fácil
O acima seria extremamente difícil de fazer com o console.log padrão .
Para uma demonstração interativa ao vivo, clique aqui .
fonte
console.log(`this is inline ${'red'.red.bold} and this is more text`.grey)o estilo iria parar após o item de estilo primeirovar txt = "asd"; txt.redou`${txt}`.red + `${txt}`.green. Não conheço uma maneira de fazer isso com a%csintaxe recomendada por outras pessoas. Assim graças para a construção da bibliotecaAtualizar:
Eu escrevi uma biblioteca JavaScript no ano passado para mim. Ele contém outros recursos, por exemplo, verbosidade para logs de depuração e também fornece um método de logs de download que exporta um arquivo de log. Dê uma olhada na biblioteca JS Logger e sua documentação.
Eu sei que é um pouco tarde para responder, mas como o OP pediu para obter mensagens coloridas personalizadas no console para opções diferentes. Todo mundo está passando a propriedade de estilo de cor em cada
console.log()instrução, o que confunde o leitor, criando complexidade no código e também prejudicando a aparência geral do código.O que eu sugiro é escrever uma função com poucas cores predeterminadas (por exemplo, sucesso, erro, informação, aviso, cores padrão) que serão aplicadas com base no parâmetro passado para a função.
Melhora a legibilidade e reduz a complexidade no código. É muito fácil de manter e estender ainda mais de acordo com suas necessidades.
Dada a seguir, é uma função JavaScript que você precisa escrever uma vez e depois usá-la novamente.
Resultado:
A cor padrão é preta e você não precisa passar nenhuma palavra-chave como parâmetro nesse caso. Em outros casos, você deve passar
success, error, warning, or infopalavras-chave para os resultados desejados.Aqui está trabalhando o JSFiddle . Veja a saída no console do navegador.
fonte
log.info("this would be green")etc. Perto o suficiente.Na verdade, acabei de descobrir isso por acaso, curioso com o que aconteceria, mas você pode realmente usar sinalizadores de coloração do bash para definir a cor de uma saída no Chrome:
Resultado:
Consulte este link para saber como funcionam os sinalizadores de cores: https://misc.flogisoft.com/bash/tip_colors_and_formatting
Basicamente, use o
\x1bou\x1Bno lugar de\e. por exemplo.\x1b[31me todo o texto depois disso será alterado para a nova cor.Ainda não tentei isso em nenhum outro navegador, mas achei que vale a pena mencionar.
fonte
Esta biblioteca é fantástica:
https://github.com/adamschwartz/log
Use Markdown para mensagens de log.
fonte
log(true, 'this is [c="color:red"]red[c]')=>true "this is %cred%c" "color:red" ""Há uma série de funções embutidas para colorir o log do console:
fonte
console.info()não adiciona mais o ícone de informações. não tenho certeza de quando isso aconteceu. Agora é diferente do que console.log () (pelo menos no Chrome e Firefox)fonte
console.log(color.red+' this is red color on text');como colors.red já atribuído.O Google documentou este https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css
Um exemplo:
fonte
sistema de modelo, útil se você deseja criar texto de linha colorido sem criar estilo completo para cada bloco
fonte
Veja isso:
Animação no console, além de CSS
https://jsfiddle.net/a8y3jhfL/
você pode colar ASCII em cada quadro para assistir a uma animação ASCII
fonte
do Chrome 60, eles removeram o recurso de cor de texto azul enquanto escreviam console.info e fazem muitas alterações na API do console.
Se você escrever uma literal de string no padrão es6, usando os backticks `` como o identificador (chamado de string de modelo) no console.log (), então abaixo da maneira pode colorir a saída do console.
fonte
Para encadear estilos CSS3 que se estendem por várias linhas, você pode fazer assim,
Resultado
Encontre mais: - https://coderwall.com/p/fskzdw/colorful-console-log
Felicidades.
fonte
Eu escrevi um plugin muito simples para mim vários anos atrás:
Para adicionar à sua página, tudo o que você precisa fazer é colocar isso na cabeça:
Então no JS:
A estrutura possui código para:
assim como:
para qualquer outro css. O acima foi projetado com a seguinte sintaxe:
fonte
Recentemente, eu queria resolver um problema semelhante e construí uma pequena função para colorir apenas as palavras-chave com as quais me importava e que eram facilmente identificáveis pelas chaves
{keyword}.Isso funcionou como um encanto:
tecnicamente, você poderia trocar a instrução if com uma instrução switch / case para permitir vários estilos por diferentes razões
fonte
Duvido que alguém realmente o veja, mas tenho uma solução simples para quem deseja misturar várias cores na mesma linha:
fonte
Tente o seguinte:
agora todos estão como você queria:
nota: formatar como
console.log("The number = %d", 123);não está quebrado.fonte
Eu escrevi um
npmmódulo que dá a possibilidade de passar:[MyFunction]warning,success,infoe outros tipos de mensagem predefinidahttps://www.npmjs.com/package/console-log-plus
Saída (com prefixos personalizados):
Saída (sem prefixos personalizados):
Entrada :
Para garantir que o usuário não processe uma cor inválida, também escrevi um validador de cores . Ele irá validar cores por
name,hex,rgb,rgba,hslouhslavaloresfonte
fonte