La console JavaScript intégrée de Chrome peut-elle afficher les couleurs?
Je veux des erreurs en rouge, des avertissements en orange et console.logen vert. Est-ce possible?
879
La console JavaScript intégrée de Chrome peut-elle afficher les couleurs?
Je veux des erreurs en rouge, des avertissements en orange et console.logen vert. Est-ce possible?
console.error()au lieu deconsole.log...console.warn()est également disponible avec une icône orange "d'avertissement", bien que le texte lui-même soit toujours noir.console.log("%c", "background: red;padding: 100000px;");entraînera un comportement très étrange dans Chrome, en particulier lors du défilement de la console.Réponses:
Dans Chrome et Firefox (+31), vous pouvez ajouter du CSS dans les
console.logmessages:La même chose peut être appliquée pour ajouter plusieurs CSS à la même commande.
Source pour Google Chrome: Présentation par Paul Irish et changement de Webkit
Source pour Firefox: Console Web Firefox - Messages de style
Référence de l'API de la console Chrome: référence de l'API de la console
la source
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:2pxtout tourne autour du rayon de la frontièreVoici un exemple extrême avec une ombre portée arc-en-ciel.
la source
Chrome 69, WIN7)Vous pouvez utiliser une feuille de style personnalisée pour colorer votre débogueur. Vous pouvez mettre ce code
C:\Documents and Settings\<User Name>\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.csssi vous êtes dans WinXP, mais le répertoire varie selon le système d'exploitation.la source
~/.config/google-chrome/Default/User\ StyleSheets/Custom.css~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css..console-message-textclasse. De plus, les couleurs d'arrière-plan les plus agréables que j'ai trouvées étaient#ffece6des erreurs,#fafad2des avertissements et#f0f9ffdes normales.Les versions plus anciennes de Chrome ne vous permettent pas
console.log()d'afficher s dans une couleur spécifique par programme, mais l'appelconsole.error()mettra uneXicône rouge sur les lignes d'erreur et rendra le texte rouge, etconsole.warn()vous obtenez une!icône jaune .Vous pouvez ensuite filtrer les entrées de la console avec les boutons Tous, Erreurs, Avertissements et Journaux sous la console.
Il se trouve Firebug a soutenu CSS personnalisé pour
console.logs depuis 2010 et le soutien Chrome a été ajouté comme Chrome 24.Lorsque
%capparaît n'importe où dans le premier argument , l' argument suivant est utilisé comme CSS pour styliser la ligne de console. D'autres arguments sont concaténés (comme cela a toujours été le cas).la source
J'ai écrit template-colors-web https://github.com/icodeforlove/Console.js pour nous permettre de faire cela un peu plus facilement
Ce qui précède serait extrêmement difficile à faire avec le fichier console.log par défaut .
Pour une démonstration interactive en direct, cliquez ici .
la source
console.log(`this is inline ${'red'.red.bold} and this is more text`.grey)le style s'arrêterait après le premier élément stylévar txt = "asd"; txt.redou`${txt}`.red + `${txt}`.green. Je ne suis pas au courant d'un moyen de le faire avec la%csyntaxe que d'autres recommandent. Merci d'avoir construit la bibliothèqueMise à jour:
J'ai écrit une bibliothèque JavaScript pour moi l'année dernière. Il contient d'autres fonctionnalités, par exemple la verbosité des journaux de débogage et fournit également une méthode de téléchargement des journaux qui exporte un fichier journal. Jetez un œil à la bibliothèque JS Logger et à sa documentation.
Je sais qu'il est un peu tard pour répondre, mais comme l'OP a demandé d'obtenir des messages de couleur personnalisés dans la console pour différentes options. Tout le monde passe la propriété de style de couleur dans chaque
console.log()déclaration, ce qui déroute le lecteur en créant de la complexité dans le code et en endommageant également l'aspect général du code.Ce que je suggère, c'est d'écrire une fonction avec peu de couleurs prédéterminées (par exemple succès, erreur, info, avertissement, couleurs par défaut) qui sera appliquée sur la base du paramètre passé à la fonction.
Il améliore la lisibilité et réduit la complexité du code. Il est trop facile à entretenir et à étendre selon vos besoins.
Vous trouverez ci-dessous une fonction JavaScript que vous devez écrire une fois et l'utiliser à plusieurs reprises.
Production:
La couleur par défaut est le noir et vous n'avez pas à passer de mot-clé comme paramètre dans ce cas. Dans d'autres cas, vous devez réussir
success, error, warning, or infomots clés pour obtenir les résultats souhaités.Voici JSFiddle fonctionne . Voir la sortie dans la console du navigateur.
la source
log.info("this would be green"), etc. Assez proche.En fait, je viens de découvrir cela par accident, curieux de savoir ce qui se passerait, mais vous pouvez réellement utiliser des drapeaux de coloration bash pour définir la couleur d'une sortie dans Chrome:
Production:
Voir ce lien pour savoir comment fonctionnent les indicateurs de couleur: https://misc.flogisoft.com/bash/tip_colors_and_formatting
Utilisez essentiellement le
\x1bou\x1Bà la place de\e. par exemple.\x1b[31met tout le texte après cela sera remplacé par la nouvelle couleur.Je n'ai pas essayé cela dans aucun autre navigateur, mais j'ai pensé qu'il valait la peine de le mentionner.
la source
Cette bibliothèque est fantastique:
https://github.com/adamschwartz/log
Utilisez Markdown pour les messages de journal.
la source
log(true, 'this is [c="color:red"]red[c]')=>true "this is %cred%c" "color:red" ""Il existe une série de fonctions intégrées pour colorer le journal de la console:
la source
console.info()n'ajoute plus l'icône info .. je ne sais pas quand cela s'est produit. Ce n'est désormais plus différent de console.log () (au moins sur Chrome et Firefox)la source
console.log(color.red+' this is red color on text');comme colors.red déjà assigné.Google a documenté cette https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css
Un exemple:
la source
système de modèles, utile si vous souhaitez créer un texte de ligne coloré sans créer de style complet pour chaque bloc
la source
Regarde ça:
Animation dans la console, plus CSS
https://jsfiddle.net/a8y3jhfL/
vous pouvez coller de l'ASCII dans chaque image pour regarder une animation ASCII
la source
de Chrome 60, ils ont supprimé la possibilité de couleur de texte bleu lors de l'écriture de console.info et nombreux changements à l'API de la console.
si vous écrivez un littéral de chaîne dans le modèle es6, en utilisant les backticks `` comme identifiant (appelé comme chaîne de modèle) dans console.log (), puis ci-dessous peut coloriser la sortie de la console.
la source
Pour chaîner des styles CSS3 qui s'étendent sur plusieurs lignes, vous pouvez faire comme ceci,
Résultat
En savoir plus: - https://coderwall.com/p/fskzdw/colorful-console-log
À votre santé.
la source
J’ai écrit un vrai simple plusieurs années, plugin pour tous:
Pour ajouter à votre page tout ce que vous avez à faire est de mettre ceci dans la tête:
Puis en JS:
Le cadre a du code pour:
aussi bien que:
pour tout autre css. Ce qui précède est conçu avec la syntaxe suivante:
la source
J'ai récemment voulu résoudre un problème similaire et créé une petite fonction pour colorer uniquement les mots clés qui m'intéressaient et qui étaient facilement identifiables par les accolades environnantes.
{keyword}.Cela a fonctionné comme un charme:
techniquement, vous pouvez remplacer l'instruction if par une instruction switch / case pour autoriser plusieurs styles pour différentes raisons
la source
Je doute que quiconque le verra réellement mais j'ai une solution simple pour ceux qui veulent mélanger plusieurs couleurs sur la même ligne:
la source
Essaye ça:
maintenant, ils sont tous comme vous le vouliez:
remarque: le formatage comme
console.log("The number = %d", 123);n'est pas rompu.la source
J'ai écrit un
npmmodule qui donne la possibilité de passer:[MyFunction]warning,success,infoet d' autres types de messages prédéfinishttps://www.npmjs.com/package/console-log-plus
Sortie (avec préfixes personnalisés):
Sortie (sans préfixes personnalisés):
Entrée :
Pour m'assurer que l'utilisateur ne rendra pas une couleur invalide, j'ai également écrit un validateur de couleur . Il validera les couleurs par
name,hex,rgb,rgba,hslouhslavaleursla source
la source