1420826 - Add console.hex() to be able to log binary data to the console

Status: NEW

(DevTools :: Console, enhancement, P5)

Description

[Niels Leenheer (HTML5test)]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.94 Safari/537.36

Steps to reproduce:

With binary data becoming more and more common in the browser, thanks to ArrayBuffers and TypedArrays and all the specifications that use them, we need to be able to properly log these data types to the console.

On the surface this is possible with console.log(), but is that is severely lacking when it comes to binary data. So I would like to propose the ability to log binary data in the classic hex dump format. Having a console.hex() command in the browser would certainly my my life of lot easier and probably a lot of others that work with binary data too!



Expected results:

Lets assume we some binary data (ESC/POS commands for a receipt printer) in the form of a Uint8Array:

let data = new Uint8Array([ 29, 104, 60, 29, 119, 3, 29, 107, 2, 51, 49, 51, 48, 54, 51, 48, 53, 55, 52, 54, 49, 51, 0, 29, 40, 107, 4, 0, 49, 65, 50, 0, 29, 40, 107, 3, 0, 49, 67, 6, 29, 40, 107, 3, 0, 49, 69, 49, 29, 40, 107, 28, 0, 49, 80, 48, 104, 116, 116, 112, 115, 58, 47, 47, 110, 105, 101, 108, 115, 108, 101, 101, 110, 104, 101, 101, 114, 46, 99, 111, 109, 29, 40, 107, 3, 0, 49, 81, 48 ]);

We then log the data variable:

console.hex(data);

Then we get the following in the console

000000  1d 68 3c 1d 77 03 1d 6b 02 33 31 33 30 36 33 30  .h<.w..k.3130630
000010  35 37 34 36 31 33 00 1d 28 6b 04 00 31 41 32 00  574613..(k..1A2.
000020  1d 28 6b 03 00 31 43 06 1d 28 6b 03 00 31 45 31  .(k..1C..(k..1E1
000030  1d 28 6b 1c 00 31 50 30 68 74 74 70 73 3a 2f 2f  .(k..1P0https://
000040  6e 69 65 6c 73 6c 65 65 6e 68 65 65 72 2e 63 6f  nielsleenheer.co
000050  6d 1d 28 6b 03 00 31 51 30                       m.(k..1Q0

For other TypedArrays this should also work and reveal the byte order of the individual elements in the array:

console.hex(new Uint32Array([ 1, 2, 30371 ]));

000000  01 00 00 00 02 00 00 00 a3 76 00 00              ........£v..

Or:

console.hex(new Float64Array([ 2.3293, 21391.29 ]));

000000  18 95 d4 09 68 a2 02 40 f6 28 5c 8f d2 e3 d4 40  ..Ô.h¢.@ö(\.ÒãÔ@

This is even useful for looking at the UTF-8 encoding of strings:

console.hex("Hello there! Iñtërnâtiônàlizætiøn 

Comment 1

[Niels Leenheer (HTML5test)]

Report above was cut short because it contained a emoji....

000000  48 65 6c 6c 6f 20 74 68 65 72 65 21 20 49 c3 b1  Hello there! Iñ
000010  74 c3 ab 72 6e c3 a2 74 69 c3 b4 6e c3 a0 6c 69  tërnâtiônà li
000020  7a c3 a6 74 69 c3 b8 6e 20 f0 9f 91 8d f0 9f 8f  zætiøn ð...ð..
000030  bb                                               »

I've created a 'one-liner' polyfill that does exactly this and can be found here:
https://gist.github.com/NielsLeenheer/4dc1a266717b7379333365e9806c3044

Comment 2

[Niels Leenheer (HTML5test)]

Related bugs:

https://github.com/whatwg/console/issues/121
https://bugs.chromium.org/p/chromium/issues/detail?id=788624
https://bugs.webkit.org/show_bug.cgi?id=180028
https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/32391829-add-console-hex-to-be-able-to-log-binary-data-to

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Note that we have such requests on Reps - our library to display variables - see https://github.com/devtools-html/devtools-core/issues/548.

Comment 4

[Brian Grinstead [:bgrins]]

(In reply to Nicolas Chevobbe [:nchevobbe] from comment #3)
> Note that we have such requests on Reps - our library to display variables -
> see https://github.com/devtools-html/devtools-core/issues/548.

I'd generally prefer to handle this issue in Reps to enhance the console.logged ArrayBuffer / TypedArray previews, as opposed to adding a new console API call just for hex data. We could even have a way to toggle from a normal preview to hex preview within the Rep.

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Brian Grinstead [:bgrins] from comment #4)
> (In reply to Nicolas Chevobbe [:nchevobbe] from comment #3)
> > Note that we have such requests on Reps - our library to display variables -
> > see https://github.com/devtools-html/devtools-core/issues/548.
> 
> I'd generally prefer to handle this issue in Reps to enhance the
> console.logged ArrayBuffer / TypedArray previews, as opposed to adding a new
> console API call just for hex data. We could even have a way to toggle from
> a normal preview to hex preview within the Rep.

Yes, i want to have this "pretty printer" button in Reps. For some, it would provide helpful view (like hex here), it might also toggle from "normal" to "custom formatted", and other things we can think of.