Monday September 13, 2004

Last week I told you how to get a selection hiearchy display in Studio Creator. This week I'll show you how to inspect the rendered DOM for your web page. The feature is not very polished since it's just something I added to help me debug rendering bugs in the CSS2 layout engine, not a product level feature, but it can be useful for others too. For example, people working on JSF components get an easy way to view the HTML rendered from a component.

Here's roughly how it works: you press some modifier keys, then click on the design surface over the component you're interested in. The closest CSS2 box will be selected (shown with a red border). Various properties of that box are now shown in the property sheet. Now you can press Esc repeatedly to select the parent box and the property sheet is updated. Take a look at the screenshot fragment on the right. I have a button inside a grid panel, and I've selected the <table> box in the box hierarchy which corresponds to the grid panel component. The property sheet is showing the html element and its attributes, the component name, the rendered html (use the ... button to see it all; that's what's showing in the (mostly clipped) dialog box on the left).

For all boxes you will see the current page position (x,y), the size (width, height), the margins, the border width, etc.

You will also see the current CSS styles computed for the element. This is somewhat helpful, except it has some limitations. I have a better CSS inspector now that will find its way into the product some day...

One thing that's really useful for component authors (and was invaluable for me in proving that a bug was in a component's renderer rather than in the designer :-) is the ability to see the html rendered by a component. When you get to a box that is the "top level box" for a particular component, the "Rendered HTML" string for that component is displayed. For example, if you drop a grid panel, with a button in it, then DOM-select the button and hit Escape up to the <table> box rendered by the grid panel, you'll see that the Grid Panel has this "Rendered HTML" property value:

<?xml version="1.0" encoding="UTF-8"?>
<table id="form1:gridPanel1" style="left: 696px; top: 48px; position: absolute">
    <tbody>
        <tr>
            <td>
                <input id="form1:button1" name="form1:button1" type="submit" value="Submit"/>
            </td>
        </tr>
    </tbody>
</table>
</p>

So now I just need to tell you what the modifier keys are. In Creator 1.0, up to patch 2, press control and shift, then click. Starting with patch 3 I had to move the feature to control-alt instead, because in patch 3 control-shift is assigned to a new designer feature that I'll blog about as soon as patch 3 goes out the door!

Usual warning: this is not a supported feature, don't file bugs, etc. etc. Use at your own risk.