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.       * {
    
  9.         box-sizing: border-box;
    
  10.       }
    
  11.       body {
    
  12.         display: flex;
    
  13.         flex-direction: row;
    
  14.         position: absolute;
    
  15.         top: 0;
    
  16.         left: 0;
    
  17.         right: 0;
    
  18.         bottom: 0;
    
  19.         margin: 0;
    
  20.         padding: 0;
    
  21.         font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
    
  22.           sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    
  23.         font-size: 12px;
    
  24.         line-height: 1.5;
    
  25.       }
    
  26.       .column {
    
  27.         display: flex;
    
  28.         flex-direction: column;
    
  29.         flex: 1 1 50%;
    
  30.       }
    
  31.       .column:first-of-type {
    
  32.         border-right: 1px solid #3d424a;
    
  33.       }
    
  34.       .iframe {
    
  35.         height: 50%;
    
  36.         flex: 0 0 50%;
    
  37.         border: none;
    
  38.       }
    
  39.       .devtools {
    
  40.         height: 50%;
    
  41.         flex: 0 0 50%;
    
  42.       }
    
  43.     </style>
    
  44.   </head>
    
  45.   <body>
    
  46.     <div class="column left-column">
    
  47.       <iframe id="iframe-left" class="iframe"></iframe>
    
  48.       <div id="devtools-left" class="devtools"></div>
    
  49.     </div>
    
  50.     <div class="column">
    
  51.       <iframe id="iframe-right" class="iframe"></iframe>
    
  52.       <div id="devtools-right" class="devtools"></div>
    
  53.     </div>
    
  54. 
    
  55.     <script src="dist/multi-devtools.js"></script>
    
  56.   </body>
    
  57. </html>