Wednesday, February 7th, 2007

Live DOM Viewer

Category: JavaScript, Screencast, Utility

Dean Edwards pointed us to a simple little utility the Live DOM Viewer.

It let’s you throw out some HTML and see a DOM, and a rendered view as you type.

To see this simple guy in action:

Posted by Dion Almaer at 12:59 am

3.4 rating from 25 votes


Comments feed TrackBack URI

I think it’s “just” usable for detecting browser defects/behaviours. Do you see any “real life” usage?

Comment by András Bártházi — February 7, 2007

Hello Andras,

Sometime you need to see what going on in the DOM treatment. Per example, suppose you are debugging someone else huge codes. Viewing what happen on the DOM can help you undertand some code behavior.

But wait for the next Firebug, it will contains tha same functionnality (plus more). So it will be much more interesting, per example,Firebug can hilight in the DOM what is changing when events/actions occures etc .

(sorry for my poor english)

Comment by Nicolas — February 7, 2007

I think Firebug is already capable to do so. You are able to watch the DOM being updated in real time and afterwards inspect that element so that it is highlighted.

At the moment the only difference is that Firebug doesn’t display the datatype of the element like the “Live DOM Viewer” does for the title-element e.g.

Comment by Stephan — February 7, 2007

Maybe I misunderstood it, but this tool doesn’t help when I would like to debug a site, but it’s just helps when I have an HTML code and would like to check how is it looks like as DOM. I know Firebug, and that’s quite good tool for debugging HTML/DOM. But isn’t capable to write the HTML and check the DOM live. They’re for different purposes, I just would like to figure out how this tool can be used for development.

Comment by András Bártházi — February 7, 2007

Hello András,

there’s just no need to use this tool, if you use Firebug, in my opinion. Let’s see what it does (or does not):

You can type some HTML and see what it looks like in DOM (in real time), in “rendered view” (parsed HTML), in “innerHTML view” (that’s just the markup you typed in the very first textarea) and do some bugfixing if errors occured.

So don’t you hold, that Firebug (or any other tool) is fully capable of the same (and greater) functionality?

In Firebug you can browse the DOM (datatype excepted) and add new elements to the DOM. You can make changes to the DOM being highlighted by enabling the “Highlight Changes” option and you can see the result in the current instance of your browser (surprising, isn’t it?)

Correct me if I’m wrong ;-)

Comment by Stephan — February 7, 2007

Good fun! Nice find! Great for presentations and explaining the DOM as you create the HTML/XHTML. Thanks for sharing!

Comment by Oliver Tse — February 7, 2007

Stephan, Firebug is for observing the DOM of a website.

This tool is for getting some experience, how the HTML code related to the DOM. As Oliver says, I think it’s good for learning and teaching. It may be good for discover how the browser parse the HTML code, find glitches, etc. It’s not related to observe a DOM of a website.

Comment by András Bártházi — February 7, 2007

speaking of parsing HTML. is there any firefox plugin to support rendering of pages written in the Relax-NG compact syntax? i can’t find any

Comment by carmen — February 7, 2007

carmen: You can write web pages in RNG compact? Of course, you really can’t — the compact syntax is a DSL for defining RNG schemas. Do you mean a syntax inspired by RNG compact? Is this something a lot of ppl are doing? Never heard of the practice myself…

Comment by Ben Galbraith — February 9, 2007

Leave a comment

You must be logged in to post a comment.