title: Customize ui:debug
body: <p>In order to analyze the component tree a better way, I use <code>&lt;ui:debug/&gt;</code>.
  Now I would like to customize this debug-window in order to optimize analyzing. </p>
  
  <hr>
  
  <h2>Prerequisites</h2>
  
  <p>I add following JavaScript-code using the JavaScript-console in Chrome. </p>
  
  <pre><code>(function () {
      var newscript = document.createElement('script');
      newscript.type = 'text/javascript';
      newscript.async = true;
      newscript.src = 'https://code.jquery.com/jquery-1.11.3.min.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(newscript);
  })();
  </code></pre>
  
  <p>for adding jQuery to the debug-window and</p>
  
  <pre><code>hideAll = function () {
      $('dd').addClass('hidden').removeClass('visible')
  };
  showAll = function () {
      $('dd').addClass('visible')
  };
  hideAll();
  $('&lt;span class="toggle toggleButton"&gt;toggle&lt;/span&gt;').insertBefore('dl:has(dd)');
  $('#tree').find('&gt; code').prepend('&lt;span class="toggleButton" onclick="showAll()"&gt;showAll&lt;/span&gt;').prepend('&lt;span class="toggleButton" onclick="hideAll()"&gt;hideAll&lt;/span&gt;');
  
  $('&lt;style type="text/css"&gt;.hidden {display: none;}.visible {display: block;}.toggleButton{padding-left: 30px;}&lt;/style&gt;').appendTo($('head'));
  $('.toggle').click(function () {
      $(this).next().children().toggleClass('visible');
  }).each(function () {
      $(this).append(' (' + $(this).next().find('dd').length + ' children)')
  });
  </code></pre>
  
  <p>for counting the components and adding some buttons to toggle the component-children.</p>
  
  <hr>
  
  <h2>Question</h2>
  
  <p>Now I wonder, if I could modify the <code>ui:debug</code>-component a cleaner way. My problems:</p>
  
  <ul>
  <li><p>I can't overload the renderer of ui:debug with following xml-code in the <code>faces-config.xml</code>. I also cannot inherit from <code>com.sun.faces.facelets.tag.ui.UIDebug</code> because it's final and it would be implementation-dependend anyway.</p>
  
  <pre><code>&lt;render-kit&gt;
      &lt;renderer&gt;
          &lt;component-family&gt;facelets&lt;/component-family&gt;
          &lt;renderer-type&gt;facelets.ui.Debug&lt;/renderer-type&gt;
          &lt;renderer-class&gt;com.my.CustomDebug&lt;/renderer-class&gt;
      &lt;/renderer&gt;
  &lt;/render-kit&gt;
  </code></pre></li>
  <li><p>I can't create a custom tag and reuse <code>UIDebug</code> because <code>facesContext.getResponseWriter()</code> of function <code>encodeBegin</code> returns null at this moment</p></li>
  <li><p>I cannot listen to <code>preRenderView</code>-Event because this event is not invoked when opening the debug-window. But I think, listening to some event would be promising.</p></li>
  </ul>
  
  <p>Do you have some ideas for this?</p>