4 ms·
An interesting convention that ~started with Firebug was the use of angle brackets in the DOM/Elements view. (eg a DIV element is shown as `<div>`). HTML, as a
by paulirish 4y ago
An interesting convention that ~started with Firebug was the use of angle brackets in the DOM/Elements view. (eg a DIV element is shown as `<div>`). HTML, as a text format, uses angle brackets to denote tags. But DOM is an in-memory object model; it doesn't have tags, but elements, and those have nothing do with angle brackets (other than getting el.innerHTML will serialize back).
From a usability POV, it's entirely defendable: make the DOM visually look like the HTML you authored. But Firebug and our current browser devtools only add them for aesthetics and familiarity.
It rarely causes problems, but it'll explain why you'll see `<tbody>` in DevTools even if your HTML doesn't have it. Still, I think dropping the HTML-y representation of DOM elements could be a win — removing end tags in particular would improve the information density.
Bonus: A Firebug Cheatsheet I made in 2007, 4 years before I was working on Chrome DevTools: https://imgur.com/I2KbZWm https://imgur.com/I2KbZWm
- gabrielizaias 4y agoWow, I remember that cheatsheet was really handy! Thanks for that. I still google "box sizing paul irish" every now and then to get to your blog… I can hardly believe it has been 10 years since you published that, time flies.
- cxr 4y agoThe pseudo-source view also came (and still comes) with noticeable performance drawbacks. Opening the inspector on a nested element using today's browsers' built-in inspectors (which are implemented in HTML nowadays) can be slower than if you were to do the same thing on the same graph with a Web development extension in Firefox, since extensions were able to use the XUL platform, and that meant being free to implement nsITreeView. And that's even with the advantage of modern hardware and and the trick where modern development tools will choose to elide elements in favor of showing a message that says that some nodes are hidden, with a button to e.g. "Show all 347 nodes". I just tried this with a 5000-row table, and clicking the "Show all[...]" button in Firefox's built-in developer tools has seemingly no effect at first—the inspector appears appears unresponsive for several seconds, before finally painting the expansion. In programs from 15 years ago running on 15+ year old hardware, on the other hand, this could expected to be nearly instant. Jamie Brandon recently complained about this sort of thing, comparing the experience of creating an information-dense UI using imgui versus doing the same "on the web" (i.e. in the browser, using HTML): <https://www.scattered-thoughts.net/log/0026/ https://www.scattered-thoughts.net/log/0026/>