Kann die in Chrome integrierte JavaScript-Konsole Farben anzeigen?
Ich möchte Fehler in Rot, Warnungen in Orange und Warnungen console.log
in Grün. Ist das möglich?
javascript
google-chrome
console
google-chrome-devtools
Zufälliges Blau
quelle
quelle
console.error()
anstelle vonconsole.log
...console.warn()
ist auch mit einem orangefarbenen Warnsymbol erhältlich, obwohl der Text selbst immer noch schwarz ist.console.log("%c", "background: red;padding: 100000px;");
verursacht in Chrome ein sehr seltsames Verhalten, insbesondere beim Scrollen der Konsole.Antworten:
In Chrome & Firefox (+31) können Sie CSS in
console.log
Nachrichten hinzufügen :Das Gleiche gilt für das Hinzufügen mehrerer CSS zu demselben Befehl. Quelle für Google Chrome: Präsentation von Paul Irish & Webkit ändern
Quelle für Firefox: Firefox Web Console - Styling Messages
Chrome Console API-Referenz: Console API-Referenz
quelle
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:2px
dreht sich alles um den GrenzradiusHier ist ein extremes Beispiel mit Regenbogen-Schlagschatten.
quelle
Chrome 69, WIN7
Sie können ein benutzerdefiniertes Stylesheet verwenden, um Ihren Debugger einzufärben. Sie können diesen Code eingeben,
C:\Documents and Settings\<User Name>\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets\Custom.css
wenn Sie sich in WinXP befinden, das Verzeichnis variiert jedoch je nach Betriebssystem.quelle
~/.config/google-chrome/Default/User\ StyleSheets/Custom.css
~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css
..console-message-text
Klasse. Die angenehmsten Hintergrundfarben, die ich gefunden habe, waren#ffece6
Fehler,#fafad2
Warnungen und#f0f9ff
Normalfarben.In älteren Versionen von Chrome können Sie
console.log()
s nicht programmgesteuert in einer bestimmten Farbe anzeigen lassen. Beim Aufrufenconsole.error()
wird jedoch ein rotesX
Symbol auf die Fehlerzeilen gesetzt, der Text wird rot undconsole.warn()
Sie erhalten ein gelbes!
Symbol.Sie können dann Konsoleneinträge mit den Schaltflächen Alle, Fehler, Warnungen und Protokolle unter der Konsole filtern.
Es stellt sich heraus, dass Firebug seit 2010 benutzerdefiniertes CSS für
console.log
s unterstützt und Chrome-Unterstützung ab Chrome 24 hinzugefügt wurde.Wenn
%c
irgendwo im ersten Argument angezeigt wird , wird das nächste Argument als CSS verwendet, um die Konsolenzeile zu formatieren. Weitere Argumente werden verkettet (wie immer).quelle
Ich habe template-colours-web https://github.com/icodeforlove/Console.js geschrieben , damit wir dies etwas einfacher tun können
Die oben wäre extrem hart mit dem Standard zu tun console.log .
Für eine interaktive Live-Demo klicken Sie hier .
quelle
console.log(`this is inline ${'red'.red.bold} and this is more text`.grey)
Das Styling würde nach dem ersten gestalteten Artikel aufhörenvar txt = "asd"; txt.red
oder zu tun`${txt}`.red + `${txt}`.green
. Mir ist keine Möglichkeit bekannt, dies mit der von%c
anderen empfohlenen Syntax zu tun . Also danke für den Bau der BibliothekAktualisieren:
Ich habe letztes Jahr eine JavaScript-Bibliothek für mich geschrieben. Es enthält andere Funktionen, z. B. Ausführlichkeit für Debug-Protokolle, und bietet auch eine Download-Protokollmethode, mit der eine Protokolldatei exportiert wird. Schauen Sie sich die JS Logger- Bibliothek und ihre Dokumentation an.
Ich weiß, es ist etwas spät zu antworten, aber als das OP darum bat, benutzerdefinierte Farbnachrichten in der Konsole für verschiedene Optionen zu erhalten. Jeder übergibt die Farbstileigenschaft in jeder
console.log()
Anweisung, was den Leser verwirrt, indem er Komplexität im Code erzeugt und auch das allgemeine Erscheinungsbild des Codes beeinträchtigt.Ich schlage vor, eine Funktion mit wenigen vorgegebenen Farben (z. B. Erfolg, Fehler, Informationen, Warnung, Standardfarben) zu schreiben, die auf der Grundlage des an die Funktion übergebenen Parameters angewendet wird.
Es verbessert die Lesbarkeit und reduziert die Komplexität des Codes. Es ist zu einfach zu warten und entsprechend Ihren Anforderungen weiter zu erweitern.
Im Folgenden finden Sie eine JavaScript-Funktion, die Sie einmal schreiben und dann immer wieder verwenden müssen.
Ausgabe:
Die Standardfarbe ist Schwarz und Sie müssen in diesem Fall kein Schlüsselwort als Parameter übergeben. In anderen Fällen sollten Sie
success, error, warning, or info
Schlüsselwörter für die gewünschten Ergebnisse übergeben.Hier arbeitet JSFiddle . Siehe Ausgabe in der Browserkonsole.
quelle
log.info("this would be green")
war usw. Nah genug.Ich fand das zufällig nur neugierig, was passieren würde, aber Sie können tatsächlich Bash-Farbflags verwenden, um die Farbe einer Ausgabe in Chrome festzulegen:
Ausgabe:
Unter diesem Link erfahren Sie, wie Farbflags funktionieren: https://misc.flogisoft.com/bash/tip_colors_and_formatting
Verwenden Sie grundsätzlich das
\x1b
oder\x1B
anstelle von\e
. z.B.\x1b[31m
und der gesamte Text danach wird auf die neue Farbe umgeschaltet.Ich habe dies in keinem anderen Browser versucht, fand es aber erwähnenswert.
quelle
Diese Bibliothek ist fantastisch:
https://github.com/adamschwartz/log
Verwenden Sie Markdown für Protokollnachrichten.
quelle
log(true, 'this is [c="color:red"]red[c]')
=>true "this is %cred%c" "color:red" ""
Es gibt eine Reihe von integrierten Funktionen zum Färben des Konsolenprotokolls:
quelle
console.info()
das Info-Symbol nicht mehr hinzugefügt wird. Ich bin mir nicht sicher, wann dies passiert ist. Es ist jetzt nicht anders als console.log () (zumindest auf Chrome und Firefox)quelle
console.log(color.red+' this is red color on text');
als bereits zugewiesene Farben.Google hat dies unter https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css dokumentiert
Ein Beispiel:
quelle
Vorlagensystem, nützlich, wenn Sie farbenfrohen Linientext erstellen möchten, ohne für jeden Block den vollständigen Stil zu erstellen
quelle
Überprüfen Sie dies heraus:
Animation in der Konsole plus CSS
https://jsfiddle.net/a8y3jhfL/
Sie können ASCII in jeden Frame einfügen, um eine ASCII-Animation anzusehen
quelle
In Chrome 60 haben sie beim Schreiben von console.info die Funktion der blauen Textfarbe entfernt und viele Änderungen an der Konsolen-API vorgenommen.
Wenn Sie ein Zeichenfolgenliteral in das es6-Muster schreiben und die Backticks `` als Bezeichner (als Vorlagenzeichenfolge bezeichnet) in console.log () verwenden , kann die Konsolenausgabe weiter unten eingefärbt werden.
quelle
Gehen Sie folgendermaßen vor, um CSS3-Stile zu verketten, die sich über mehrere Zeilen erstrecken:
Ergebnis
Weitere Informationen: - https://coderwall.com/p/fskzdw/colorful-console-log
Prost.
quelle
Ich habe vor einigen Jahren ein realllllllllllllllllly einfaches Plugin für mich geschrieben:
Um Ihrer Seite etwas hinzuzufügen, müssen Sie nur Folgendes in den Kopf setzen:
Dann in JS:
Das Framework enthält Code für:
ebenso gut wie:
für jede andere CSS. Das Obige wurde mit der folgenden Syntax entworfen:
quelle
Ich wollte kürzlich ein ähnliches Problem lösen und habe eine kleine Funktion erstellt, um nur Schlüsselwörter einzufärben, die mir wichtig waren und die durch umgebende geschweifte Klammern leicht zu identifizieren waren
{keyword}
.Das hat wie ein Zauber gewirkt:
Technisch gesehen können Sie die if-Anweisung gegen eine switch / case-Anweisung austauschen, um mehrere Stile aus unterschiedlichen Gründen zuzulassen
quelle
Ich bezweifle, dass es tatsächlich jemand sehen wird, aber ich habe eine einfache Lösung für diejenigen, die mehrere Farben in derselben Linie mischen möchten:
quelle
Versuche dies:
Jetzt sind sie alle so, wie Sie es wollten:
Hinweis: Die Formatierung wie
console.log("The number = %d", 123);
ist nicht fehlerhaft.quelle
Ich habe ein
npm
Modul geschrieben, das einem die Möglichkeit gibt, zu bestehen:[MyFunction]
warning
,success
,info
und andere vordefinierte Nachrichtentypenhttps://www.npmjs.com/package/console-log-plus
Ausgabe (mit benutzerdefinierten Präfixen):
Ausgabe (ohne benutzerdefinierte Präfixe):
Eingabe :
Um sicherzustellen, dass der Benutzer keine ungültige Farbe rendert, habe ich auch einen Farbvalidator geschrieben . Es wird validieren Farben
name
,hex
,rgb
,rgba
,hsl
oderhsla
Wertequelle
quelle