Online Hexdump Tool

I have just published a testing version of an online hexdump utility, which can be found here.

There exist a few online hexdump tools already, but these all require you to upload a file to a remote server, which may be inappropriate. Also, in most cases these tools produce an output quite unlike what we are used to with od, xxd and the like. I wanted something closer to what my favorite shell utilities produce.

My (still experimental) tool processes files locally in JavaScript, using HTML5 local file access and produces something similar to hexdump -C’s output, without byte grouping.

A screenshot of the tool in action is shown below:

This tool may be useful in circumstances where you don’t have a machine with a proper operating system at hand and quickly want to inspect some file.

It still has some rough edges and especially large files may hang the browser. I learned the rough way that document.createTextNode() is very expensive, and had to replace many instances of it with simple string concatenation and a single call to createTextNode(). That speeded things up a lot.

The most interesting part of the code is the formatting of the hex dump output, this is shown below:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
for (var i = 0; i < this.image.length; i++) {
  // write address
  if (i % 16 == 0) {
      var a = i.toString(16);
      while (a.length < 4) a = "0" + a; // FIXME: hardcoded format 
      frag += a + ": ";
  };

  var c = this.image[i];       // raw byte (char)
  var cc = c.charCodeAt(0);   // charcode

  // format byte
  var h = cc.toString(16);
  while (h.length < 2) h = "0" + h;
  frag += h;

  // append char to ascii representation, print non-printable as "."
  ascii += (cc > 31 && cc < 127)?c:'.';

  // format columns
  frag += (i % 16 == 15)?ascii + "\n":" ";

  if (i % 16 == 15) ascii = "    "; // clear ascii rep. on newline
};

// handle last line, pad empty bytes
for (var s = 0; s < (16 - (i % 16)) * 3 - 1; s++) frag += " ";
frag += ascii + "\n";

// commit fragment to DOM
this.appendChild(document.createTextNode(frag));

This code was originally written for another purpose and it does not format addresses over 0xffff properly, but I will fix that sooner or later.

More output format options (byte grouping, columns, etc.) would also be useful, but implementing that requires some cleaning up of the code above, as it is already turning crufty after a few iterations. :)

Comments