1720116 - Handle ANSI color codes in console.log

Status: NEW

(DevTools :: Console, enhancement)

Description

[Florens Verschelde :fvsch]

Attachment: stackblitz-node-terminal-colors-firefox.png

I’m working on StackBlitz (stackblitz.com) which recently launched support for running npm packages using Node.js APIs in the browser, using the browser's JavaScript VM. This enables running web servers such as express, and build tools such as webpack, directly in the browser.

Some of those tools use popular npm packages such as chalk (one of the very top npm packages, accounting to 0,3% of all package downloads in my calculations) and colors to log colorized text to stdout. When running in Firefox, this results in text looking like this in the Console:

[31mthis is an error[39m
[33mthis is a warning[39m

and extreme cases can be completely unreadable:

[31mA[39m[37mm[39m[34me[39m[31mr[39m[37mi[39m[34mc[39m[31ma[39m[37m,[39m [31mH[39m[37me[39m[34mc[39m[31mk[39m [34mY[39m[31me[39m[37ma[39m[34mh[39m[31m![39m

It could be great if console.log input could either support ANSI color codes (which Chrome DevTools does), or alternatively strip them to show the raw text in a readable fashion.

I haven't seen other websites using ANSI color codes with console.log yet, so I can't say it's widespread.

Comment 1

[Florens Verschelde :fvsch]

Attachment: stackblitz-node-terminal-colors-chrome.png

For comparison, here's the result in Chrome DevTools.

Comment 2

[Florens Verschelde :fvsch]

Limited test case:

console.log(`
\u001B[31mThis is an error\u001B[39m
\u001B[33mThis is a warning\u001B[39m
`)

Works in Chrome, not in Firefox.

---

I have a more complex test case, shown above, which uses the chalk and colors npm pages.
https://stackblitz.com/edit/node-colors-test?file=README.md

It's a bit complex because it runs in StackBlitz WebContainer which doesn't officially support Firefox yet.
You can get it to run in Firefox (at least in Nightly) with:

1. In about:config, set dom.postMessage.sharedArrayBuffer.bypassCOOP_COEP.insecure.enabled to true.
2. You probably need to set Enhanced Tracking Protection to “Standard” if it’s set to “Strict”.
3. In the browser console, run localStorage.webcontainer_any_ua = 'true'.
4. Reload the page.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

thanks for filing Florens!

For what it's worth, Safari doesn't support this either, and I couldn't find anything about this in the spec (https://console.spec.whatwg.org/)

Chrome seems to treat it as a "style block" (%c), as console.log(%cHello \u001B[31mRED, "background-color: yellow") won't apply the background color (or any other property, say font-size) to "RED".

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

I filed an issue in the console spec repo: https://github.com/whatwg/console/issues/197

Comment 5

[Benedikt Meurer]

I'm currently working on improving support for ANSI color codes in Chromium DevTools. Relevant links:

• https://bit.ly/devtools-console-ansi-support
• http://crbug.com/1282837

Comment 6

[Florens Verschelde :fvsch]

Improvements shipped in Chrome DevTools: https://developer.chrome.com/blog/new-in-devtools-99/#console

Comment 7

[Akoki]

Chrome supports ANSI color since 2018.
https://stackoverflow.com/a/52733695/11468937

Any plans about it in Firefox?

Comment 8

[Julius Schwartzenberg]

It would also be useful to have this when viewing content served as text/plain. CI logs tend to be served as such and can also contain color codes. Now one has to download the file and open it using less -R or a similar tool.

Comment 9

[Julius Schwartzenberg]

This add-on provides this functionality already: https://addons.mozilla.org/en-US/firefox/addon/retrotxt/

Comment 10

[esprigde]

Still doesnt have colors in console?