Nowadays, I might have 8 or 9 different modules in my webpage that all output debug logs when running non-minified versions to help debugging. Additionally, it is also my REPL for some ad-hoc coding. This results in an avalanche of messages that are hard to differentiate. There are a few ways to make things stand out.
console.error are highlighted in different ways:
console.group/.groupEnd but that requires you to wrap all calls inside calls to .group(name) and .groupEnd()
The problem is that there is no concept of scope inherent to the logger. For example, it would be useful to create either a scoped logger or pass in a scope name:
console.logScoped("Foo", "My Log Message"); console.warnScoped("Foo", "A Warning, oh noes!"); var scoped = console.createScope("Foo"); scoped.log("My Log Message"); scoped.warn("A Warning, oh noes!");
This would allow Browsers to create different sinks for their logs, e.g., I could have different tabs:
From there, we can even think about stuff like “Write all log messages with this scope to a file” and then I could browse the site, test out functionality and then check the logfile afterwards.
Of course, there are a few issues to solve (Do we support child scopes? Would we expose sinks/output redirection via some sort of API?), but I think that it’s time to have a look at how to turn the console.log mechanism from printf-style debugging into something a lot closer to a dev logging facility.