Bug 180028 – Web Inspector: Add console.hex() to be able to log binary data to the console

• Component: Web Inspector
• Status: NEW

[Niels Leenheer (HTML5test)]

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!

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 👍🏻");

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

[Niels Leenheer (HTML5test)]

Related bugs:

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

[Blaze Burg]

Interesting proposal. I think we have wanted to offer this for viewing Uint8Array an similar data types in the debugger.

[Radar WebKit Bug Importer]

<rdar://problem/35704795>