Using Eclipse Debugger With GWT

GWT uses CSS styling in order to format rendered widgets, but since your abstracted away from the underlying DOM, it can sometimes be hard to create the exact CSS rule.  I recently created a composite GXT component and as a result couldn't quite get the CSS rule correct, (as it turns out, it was a rogue DIV element messing things up).  The following shows how to use some advanced features of the Eclipse debugger, with a GWT application running in hosted mode, in order to see the HTML that's rendered for a GWT widget.

1. First we need to set a breakpoint at the correct position in the code.  For this we open ComplexPanel: press CTRL+SHIFT+T and enter ComplexPanel and press OK
2. Press CTRL+O and type "add", this will show the add(Widget, Element) method, press enter to jump to it
3. On line 86 (the adopt call) right click in the margin and choose Toggle Breakpoint
4. Once the breakpoint has been set, right click on the breakpoint marker (blue dot in margin) and select breakpoint properties
5. In the breakpoint dialog, click Enable Condition :
6. The enable condition allows the breakpoint to only be triggered when the condition is met.  In the Condition box, enter "this instanceof RootPanel".  This is because ComplexPanel::Add will be called for all panels, but we're only interested in the point where a widget is added to the RootPanel.
7. Click OK and use the GWT launcher configuration to start a hosted mode session in debug mode.
8. When the breakpoint activates, Eclipse will change to the debug perspective, stopping at line 86: 
9. Press F6 to step over the adopt call, which we need to do in order to setup the child.  (If you remember from a previous post it's only in the adopt call where the Widget::setParent is called and the whole attach process begins.)
10. Now we need to see the child DOM HTML element which we can do with the fantastic Debug Display view.  Bring up the display view by selecting Window -> Show View -> Display
11. The display view will open (possibly at the bottom of the screen).  The display view allows any Java code to be executed, so we'll use it to call the GWT DOM.toString method which takes an element and displays the elements DOM as a string.  Go to the display view and enter DOM followed by CTRL+SPACE which will bring up the auto complete box. Select the com.google.gwt.user.client.DOM class.
12. Finish off the call to DOM.toString as follows : 
13. Now we can execute the statement by highlighting the whole thing and clicking on the execute selected text (or pressing CTRL+SHIFT+D):
14. Once executed, the DOM will be displayed :
15. To carry on with your application, press F8, the program will break next time something is added to the RootPanel