How to locate where Wicket markup comes from your browser’s source view

Sometimes, Wicket’s dynamic component structures makes it a bit hard to figure out what on your page comes from where. Not anymore. Matej recently implemented a little but very helpful debugging aid for this in Wicket. You can turn this feature on by putting this:

@Override
protected void init() {
  ...
  getDebugSettings().setOutputMarkupContainerClassName(true);

in your application class. Or, let it depend on a system setting you pass in your debug environment:

  try {
   getDebugSettings().setOutputMarkupContainerClassName(
        Boolean.getBoolean("debug.markup.output"));
  } catch (SecurityException e) {
    // nevermind
  }

so that it’s only turned on when you explicitly tell it to be turned on.

If you have this setting turned on, and you look at the sources of pages in your web browser, you’ll see fragments like this:

<!-- MARKUP FOR com.my.ViewTopicPanel$3 END -->
  <span><!-- MARKUP FOR com.my.PodBorder BEGIN -->
    <img src="/foo/bar.gif" />
    <table >

Say, you want to locate where that crazy foo/bar image comes from, you now know that it is rendered by com.my.PodBorder, and that you can find that piece of markup in PodBorder.html or the markup associated to a parent higher up in the hierarchy.