How do I convert DOMSnapshot.captureSnapshot produced snapshot to HTML?

Question

I have a screenshot captured using Chrome DevTools Protocol DOMSnapshot.captureSnapshot that I want to convert to HTML. How do I do that?

The output looks similar to:

{
  "documents": [
    {
      "layout": {
        "nodeIndex": [
          0,
          2,
          36,
          39,
          42,
          43,
          44,
          45,
          46,
          47,
          48,
          49,
          50,
         ...
            36
          ]
        ],
        "start": [
          0,
          0,
          34,
          0,
          0
        ],
        "length": [
          17,
          33,
          19,
          15,
          7
        ]
      },
      "scrollOffsetX": 0,
      "scrollOffsetY": 0,
      "contentWidth": 740,
      "contentHeight": 360
    }
  ],
  "strings": [
    "https://www.google.com/",
    "Google",
    ...
    "window.wiz_progress&&window.wiz_progress(); window.stopScanForCss&&window.stopScanForCss(); ccTick('bl');"
  ]
}

There appears to be no documentation explaining how to convert between the formats.

Answer 1

If you are using Java, then this library may help you to get the snapshot of DOM represented using classes.

Then next step would be to traverse the structure using visitor patter and build the HTML along the way.