In the console of Chrome you can write pretty nice stuff these days. Checkout this link. I've also made a screenshot:
As you can see in the screenshot too, the file name / line number (VM298:4) is written at the right. Is it possible the remove that, because in my case this is a very long name and more or less breaks the effect I'm trying to make in my console ?
This is pretty simple to do. You will need to use setTimeout with a console.log.bind:
setTimeout (console.log.bind (console, "This is a sentence."));
And if you want to apply CSS or additional text to it just add add %c or any other % variable:
setTimeout (console.log.bind (console, "%cThis is a sentence.", "font-weight: bold;"));
var css = "text-decoration: underline;";
setTimeout (console.log.bind (console, "%cThis is a sentence.", css));
Note that this method will always be placed at the end of the log list. For example:
console.log ("Log 1");
setTimeout (console.log.bind (console, "This is a sentence."));
console.log ("Log 2");
will appear as
Log 1
Log 2
This is a sentence.
instead of
Log 1
This is a sentence.
Log 2
I hope this answers your question.
To keep your logging statements clean, you can define console.print() as a function and simply use console.print() the same as you would use console.log() to log without filename/line numbers:
// console.print: console.log without filename/line number
console.print = function (...args) {
queueMicrotask (console.log.bind (console, ...args));
}
console.print takes the same arguments as console.log for example:
console.print("Text with no filename info.")
console.print('%c Custom CSS and no line numbers! ', 'background: #555555; color: #00aaff');
Use queueMicrotask with console.log.bind to loose the source file info when logging:
queueMicrotask (console.log.bind (console, "Look! No source file info..."));
Queuing microtasks will maintain order of the logging if there are multiple calls, while setTimeout is not guaranteed to execute tasks in order.
