New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add console.hex() #121

Closed
NielsLeenheer opened this Issue Nov 27, 2017 · 3 comments

Comments

3 participants
@NielsLeenheer

NielsLeenheer commented Nov 27, 2017

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

@domfarolino domfarolino self-assigned this Nov 27, 2017

@terinjokes

This comment has been minimized.

Show comment
Hide comment
@terinjokes

terinjokes Nov 27, 2017

Collaborator

The specification purposefully doesn't describe what log lines should look like, but it does state that they may be "potentially interactive".

Much like clicking on colors on the CSS panel allows you to swap between rgba and hex, I could see the display of TypedArrays and DataViews being interactive, including a "hexdump" view.

Collaborator

terinjokes commented Nov 27, 2017

The specification purposefully doesn't describe what log lines should look like, but it does state that they may be "potentially interactive".

Much like clicking on colors on the CSS panel allows you to swap between rgba and hex, I could see the display of TypedArrays and DataViews being interactive, including a "hexdump" view.

@domfarolino

This comment has been minimized.

Show comment
Hide comment
@domfarolino

domfarolino Dec 18, 2017

Member

I agree. It sounds like this isn't something that would require adding a new method to Console. Also Chrome does not sound willing to implement (given pfeldman@'s status:WontFix), and @bgrins seems to believe that could be done in DevTools with no real effect on Console.

Member

domfarolino commented Dec 18, 2017

I agree. It sounds like this isn't something that would require adding a new method to Console. Also Chrome does not sound willing to implement (given pfeldman@'s status:WontFix), and @bgrins seems to believe that could be done in DevTools with no real effect on Console.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment