¿Puede la consola JavaScript incorporada de Chrome mostrar colores?
Quiero errores en rojo, advertencias en naranja y console.log's en verde. ¿Es eso posible?
javascript
google-chrome
console
google-chrome-devtools
Randomblue
fuente
fuente
console.error()lugar deconsole.log...console.warn()también está disponible con un icono naranja de "advertencia", aunque el texto en sí sigue siendo negro.console.log("%c", "background: red;padding: 100000px;");causará un comportamiento muy extraño en Chrome, especialmente al desplazarse por la consola.Respuestas:
En Chrome y Firefox (+31) puede agregar CSS en los
console.logmensajes:Lo mismo se puede aplicar para agregar múltiples CSS al mismo comando.
Fuente para Google Chrome: Presentación de Paul Irish & Webkit change
Fuente para Firefox: Firefox Web Console - Mensajes de estilo
Referencia de la API de la consola de Chrome: Referencia de la API de la consola
fuente
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:2pxtodo se trata del radio del bordeAquí hay un ejemplo extremo con la sombra del arco iris.
fuente
Chrome 69, WIN7)Puede usar una hoja de estilo personalizada para colorear su depurador. Puede poner este código
C:\Documents and Settings\<User Name>\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.csssi está en WinXP, pero el directorio varía según el sistema operativo.fuente
~/.config/google-chrome/Default/User\ StyleSheets/Custom.css~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css..console-message-textclase. Además, los colores de fondo más agradables que encontré fueron#ffece6para errores,#fafad2advertencias y#f0f9ffpara la normalidad.Las versiones anteriores de Chrome no permiten que se
console.log()muestre s en un color específico mediante programación, pero las llamadasconsole.error()pondrán unXícono rojo en las líneas de error y harán que el texto sea rojo, yconsole.warn()obtendrá un!ícono amarillo .Luego puede filtrar las entradas de la consola con los botones Todos, Errores, Advertencias y Registros debajo de la consola.
Resulta que Firebug ha admitido CSS personalizado para
console.logs desde 2010 y Chrome se ha agregado a partir de Chrome 24.Cuando
%caparece en cualquier parte del primer argumento , el siguiente argumento se usa como CSS para diseñar la línea de la consola. Otros argumentos se concatenan (como siempre ha sido el caso).fuente
Escribí template-colors-web https://github.com/icodeforlove/Console.js para permitirnos hacer esto un poco más fácil
Lo anterior sería extremadamente difícil de hacer con el console.log predeterminado .
Para una demostración interactiva en vivo, haga clic aquí .
fuente
console.log(`this is inline ${'red'.red.bold} and this is more text`.grey)el estilo se detendría después del primer elemento diseñadovar txt = "asd"; txt.redo`${txt}`.red + `${txt}`.green. No conozco una manera de hacer esto con la%csintaxis que otros recomiendan. Así que gracias por construir la bibliotecaActualizar:
He escrito una biblioteca de JavaScript el año pasado para mí. Contiene otras características, por ejemplo, verbosidad para los registros de depuración y también proporciona un método de descarga de registros que exporta un archivo de registro. Eche un vistazo a la biblioteca JS Logger y su documentación.
Sé que es un poco tarde para responder, pero como el OP solicitó obtener mensajes de color personalizados en la consola para diferentes opciones. Todos pasan la propiedad de estilo de color en cada
console.log()declaración que confunde al lector al crear complejidad en el código y también daña el aspecto general del código.Lo que sugiero es escribir una función con pocos colores predeterminados (por ejemplo, éxito, error, información, advertencia, colores predeterminados) que se aplicará en función del parámetro pasado a la función.
Mejora la legibilidad y reduce la complejidad del código. Es demasiado fácil de mantener y ampliar según sus necesidades.
A continuación se muestra una función de JavaScript que debe escribir una vez y luego usarla una y otra vez.
Salida:
El color predeterminado es el negro y no tiene que pasar ninguna palabra clave como parámetro en ese caso. En otros casos, debe pasar
success, error, warning, or infopalabras clave para obtener los resultados deseados.Aquí está trabajando JSFiddle . Ver salida en la consola del navegador.
fuente
log.info("this would be green"), etc. Lo suficientemente cercana.De hecho, acabo de encontrar esto por accidente y siento curiosidad por lo que sucedería, pero en realidad puedes usar banderas de colores bash para configurar el color de una salida en Chrome:
Salida:
Consulte este enlace para ver cómo funcionan las banderas de color: https://misc.flogisoft.com/bash/tip_colors_and_formatting
Básicamente use el
\x1bo\x1Ben lugar de\e. p.ej.\x1b[31my todo el texto después de eso se cambiará al nuevo color.Sin embargo, no he probado esto en ningún otro navegador, pero pensé que valía la pena mencionarlo.
fuente
Esta biblioteca es fantástica:
https://github.com/adamschwartz/log
Use Markdown para mensajes de registro.
fuente
log(true, 'this is [c="color:red"]red[c]')=>true "this is %cred%c" "color:red" ""Hay una serie de funciones incorporadas para colorear el registro de la consola:
fuente
console.info()ya no agrega el ícono de información ... no estoy seguro de cuándo sucedió esto. Ahora no es diferente de console.log () (al menos en Chrome y Firefox)fuente
console.log(color.red+' this is red color on text');como colors.red ya asignado.Google ha documentado esto https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css
Un ejemplo:
fuente
sistema de plantillas, útil si desea crear texto de línea colorido sin crear un estilo completo para cada bloque
fuente
Mira esto:
Animación en consola, más CSS
https://jsfiddle.net/a8y3jhfL/
puedes pegar ASCII en cada cuadro para ver una animación ASCII
fuente
de Chrome 60, eliminaron la facilidad de color de texto azul al escribir console.info y hacen muchos cambios en la API de la consola.
si escribe un literal de cadena en el patrón es6, usando los backticks `` como el identificador (llamado como cadena de plantilla) en console.log () , a continuación puede colorear la salida de la consola.
fuente
Para encadenar estilos CSS3 que abarcan varias líneas, puede hacer esto,
Resultado
Encuentre más: - https://coderwall.com/p/fskzdw/colorful-console-log
Salud.
fuente
Escribí un reallllllllllllllllly simpleHace varios años plugin para mí:
Para agregar a su página, todo lo que necesita hacer es poner esto en la cabeza:
Luego en JS:
El marco tiene código para:
tanto como:
para cualquier otro css. Lo anterior está diseñado con la siguiente sintaxis:
fuente
Hace poco quería resolver un problema similar y construí una pequeña función para colorear solo las palabras clave que me importaban y que fueran fácilmente identificables entre llaves.
{keyword}.Esto funcionó a las mil maravillas:
técnicamente, podría cambiar la declaración if con una declaración switch / case para permitir múltiples estilos por diferentes razones
fuente
Dudo que alguien realmente lo vea, pero tengo una solución simple para aquellos que desean mezclar varios colores en la misma línea:
fuente
Prueba esto:
ahora todos son como querías:
nota: el formato como
console.log("The number = %d", 123);no está roto.fuente
Escribí un
npmmódulo que le da a uno la posibilidad de pasar:[MyFunction]warning,success,infoy otros tipos de mensaje predefinidohttps://www.npmjs.com/package/console-log-plus
Salida (con prefijos personalizados):
Salida (sin prefijos personalizados):
Entrada :
Para asegurarme de que el usuario no muestre un color no válido, también escribí un validador de color . Se validará por colores
name,hex,rgb,rgba,hslohslavaloresfuente
fuente