The first update of the index.html template is as follows. Replace the debug div with this new HTML:

<div data-bind="event: {
  mouseover:showDebug,
  mouseout:hideDebug
}">
  <h3 style="cursor:pointer">
    Place the mouse over to display debug
  </h3>
  <pre class="well well-lg" data-bind="visible:debug, toJSON: $root"></pre>
</div>

This code says that when we set the mouse over the div element, we will show the debug panel. Initially, only the h3 tag content will be displayed.

When we set the mouse over the h3 tag, we will update the debug variable value and the debug panel will be displayed. To achieve this, we need to update our view-model with this code:

var debug = ko.observable(false);

var showDebug = function () {
  debug...