Experiment with dropping angle brackets in the devtools DOM Inspector tree view

[sideshowbarker]

Since elements in the DOM don’t have start tags or end tags or other markup, let’s experiment with making them not look like markup — by dropping the angle brackets added around element names in the tree view in the DOM Inspector.

And let’s also drop the markup-looking delimiters around comments.

Then, to take things further and bring the DOM Inspector tree view more in line with what it’s actually representing, let’s add some styling to more clearly represent elements as containers/boxes that hold/contain other element-node containers, as well as (non-container) text nodes and comments nodes.

In other words, let’s try making a tree of DOM nodes/containers look like a tree of DOM nodes/containers.

And let’s explore making it look less like markup.

Let’s see if we can make something a little more new and fun more adventurous than what older browsers all have.

With just the angle brackets removed, but no new styling, here’s what things look like:

And with some new styling added, here’s what things look like:

---

Part of the rationale for the changes is: many HTML authors have a somewhat confused view of what’s actually in the DOM. For example, some authors imagine elements in the DOM have start tags and end tags, and other markup features.

So by not representing the DOM as something that looks like markup, we can help authors have a better mental model of what the DOM is — and what a (parsed) HTML document actually is (that is, a tree of DOM nodes).

In other words, let’s try making a tree of DOM nodes look like a tree of DOM nodes. And look less like markup.

Later, if a lot of people end up finding it too unsettling to see this new, somewhat more-adventurous kind of DOM tree view — and want to switch back to the old, more-comfortable-by-way-familiarity-and-inertia markup-like view that older browsers have reflexively all adopted — then we can change it back at that time.

But for now, this changes give us a starting point for something a little fun and new and more exploratory from which we can experiment with and refine further, to see how far we can take it.