Proto Tree 🌳 - A Way to Observe the JS Prototype Chain [𝕏]

Originally posted on X

You always hear about the prototype chain in #JavaScript, but why isn't there a way to actually see and play with it?

Well, now there is!

Here's ProtoTree 🌳 - a fun little app you can use any time to both generate and observe the prototype chain live in the browser as a tree: A screenshot of the ProtoTree app in action

Motivation: As a browser security researcher, I always found it weird there isn't a tool (AFAIK) to help you better understand the proto-chain.

An app you can play with and use to see how everything connects.

It can be useful for a number of reasons:

1. Learning!

* Who're the ancestors of HTMLBodyElement?

* What are all the error types your browser supports?

* What are all the SVG interfaces your browser supports?

This goes as far as you want it to! The result of running ProtoTree in Chrome and filtering by "HTMLBodyElement"
2. Research!

Being able to generate this information can be useful to arrive at more insightful conclusions:

* More powerful and accurate feature detection - since ProtoTree walks through EVERYTHING, the tree it outputs is consistent on one hand, but is also sensitive to the...
... slightest modifications to the runtime env on the other hand.

Meaning, the most delicate diffs between envs will affect the result outputted by ProtoTree.

Therefore, it'll differ among different OSes, browsers, devices - even extensions!

Anyone thinking of finger printing? A JSON diff between the result of running ProtoTree on Chrome and Firefox (using "error" as filter)
Whereas the logic behind the app isn't suited for consuming as API (help is welcome!), it currently offers to:

* Filter the tree by text
* Jump to key prototypes in the generated chain
* Copy the output tree as JSON
* Observe own properties of each prototype in the chain

By opening the devtools, you can investigate the output further by:

* Observing the live values in the tree
* Observing the entire tree as a JSON object
* Observing the filtered tree as a JSON object

Without getting into too much detail, here's how ProtoTree works: Showing the extra tools ProtoTree logs to the devtools console for further investigation of the prototype chain tree
For the generation to remain as pure as possible, it runs in a cross origin "data:" iframe so that scripts polluting the top realm env won't get in the way.

The tree construction is done thanks to LavaTube - a security research tool developed @MetaMask
You're welcome to visit (and ⭐!) the source code https://github.com/weizman/ProtoTree, be warned that no effort was put into the codebase being well designed and architectured - this is an experimental tool!

Also, the widest the filter is, the longer it'll take the browser to form the tree!
I hope you find this interesting and/or useful!

If this inspires you or gives you any ideas of how ProtoTree can be used, I'd love to hear it!

ProtoTree is served freely on @GitHub Pages and is MIT licensed for your education, free use, etc.

Made with love for the community ❀️