1. <!doctype html>
    
  2. <html>
    
  3.   <head>
    
  4.     <meta charset="utf8">
    
  5.     <title>React DevTools</title>
    
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
    
  7.     <style>
    
  8.       #target {
    
  9.         flex: 1;
    
  10.         border: none;
    
  11.       }
    
  12.       #devtools {
    
  13.         height: 400px;
    
  14.         max-height: 50%;
    
  15.         overflow: hidden;
    
  16.         z-index: 10000001;
    
  17.       }
    
  18.       body {
    
  19.         display: flex;
    
  20.         flex-direction: column;
    
  21.         position: absolute;
    
  22.         top: 0;
    
  23.         left: 0;
    
  24.         right: 0;
    
  25.         bottom: 0;
    
  26.         margin: 0;
    
  27.         padding: 0;
    
  28.         font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    
  29.           sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    
  30.         font-size: 12px;
    
  31.         line-height: 1.5;
    
  32.       }
    
  33.       .optionsRow {
    
  34.         width: 100%;
    
  35.         display: flex;
    
  36.         padding: 0.25rem;
    
  37.         background: aliceblue;
    
  38.         border-bottom: 1px solid lightblue;
    
  39.         box-sizing: border-box;
    
  40.       }
    
  41.       .optionsRowSpacer {
    
  42.         flex: 1;
    
  43.       }
    
  44.     </style>
    
  45.   </head>
    
  46.   <body>
    
  47.     <div class="optionsRow">
    
  48.       <button id="mountButton">Unmount test app</button>
    
  49.       <div class="optionsRowSpacer">&nbsp;</div>
    
  50.       <span>
    
  51.         <a href="/multi.html">multi DevTools</a>
    
  52.         |
    
  53.         <a href="/e2e.html">e2e tests</a>
    
  54.         |
    
  55.         <a href="/e2e-regression.html">e2e regression tests</a>
    
  56.         |
    
  57.         <a href="/perf-regression.html">perf regression tests</a>
    
  58.       </span>
    
  59.     </div>
    
  60. 
    
  61.     <!-- React test app (shells/dev/app) is injected here -->
    
  62.     <!-- DevTools backend (shells/dev/src) is injected here -->
    
  63.     <!-- global "hook" is defined on the iframe's contentWindow -->
    
  64.     <iframe id="target"></iframe>
    
  65. 
    
  66.     <!-- DevTools frontend UI (shells/dev/src) renders here -->
    
  67.     <div id="devtools"></div>
    
  68. 
    
  69.     <!-- This script installs the hook, injects the backend, and renders the DevTools UI -->
    
  70.     <!-- In DEV mode, this file is served by the Webpack dev server -->
    
  71.     <!-- For production builds, it's built by Webpack and uploaded from the local file system -->
    
  72.     <script src="dist/app-devtools.js"></script>
    
  73.   </body>
    
  74. </html>