debugger.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
    html {
      height: 100%;
    }
    body {
      min-height: 100%;
    }
    
    #debuggerContainer {
      position: absolute;
      width: 100%;
      height: calc(100% - 30px);
      background-color: white;
    }
    
    </style>
  </head>
  <body>
    <!-- booting lively just came down to this one line -->
    <script src="src/client/boot.js" data-container="false"></script>

    <div id="debuggerContainer">
      <lively-debugger id="debugger"></lively-debugger>
      <script>
        var debuggerNode = document.querySelector('#debugger');
        debuggerNode.addEventListener('loaded', () => {
          var targetId = lively.preferences.getURLParameter('targetId');
          if (targetId) {
            debuggerNode.attachAndEnableDebuggerFromTargetId(targetId);
          }
        });
      </script>
    </div>
  </body>
</html>