title: Visualizing the html source of a website, after JS processed, keeping the right indentation
body: <p>I'm trying to dive into a complex website, which uses <code>JS</code> as well for processing its components.
  The <code>Inspector-Tool</code> on <code>firefox</code> is great, but for certain situations I rather prefer to dump copy the plain <code>html</code> <strong>source</strong> into a text file localy and use my favourite text editor.
  Using the <code>Ctrl + U</code> <strong>Page Source tool</strong> gives me the Pre-JS html code of the page, in my example.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot;/&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no&quot;/&gt;
      &lt;meta name=&quot;mobile-web-app-capable&quot; content=&quot;yes&quot;&gt;
      &lt;meta name=&quot;apple-mobile-web-app-capable&quot; content=&quot;yes&quot;&gt;
      &lt;meta name=&quot;apple-mobile-web-app-status-bar-style&quot; content=&quot;black&quot;&gt;
      &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;../assets/logo.png?version=1.9.1&quot; /&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/open-stage-control.css?version=1.9.1&quot; hot-reload/&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/theme.css?version=1.9.1&quot; hot-reload/&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/fonts/fontawesome.min.css?version=1.9.1&quot;/&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/fonts/fa-solid.css?version=1.9.1&quot;/&gt;
      &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;../assets/fonts/roboto.css?version=1.9.1&quot;/&gt;
      &lt;link rel=&quot;shortcut icon&quot; href=&quot;../assets/favicon.png?version=1.9.1&quot;/&gt;
      &lt;script src=&quot;../client/open-stage-control-client.js?version=1.9.1&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body class=&quot;editor-disabled&quot;&gt;
      &lt;osc-workspace class=&quot;vertical&quot;&gt;
          &lt;osc-panel-container class=&quot;horizontal&quot; id=&quot;main&quot;&gt;
              &lt;osc-toolbar id=&quot;main-menu&quot;&gt;&lt;/osc-toolbar&gt;
              &lt;osc-panel-container class=&quot;left&quot;&gt;
                  &lt;div class=&quot;resize-handle left&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;toggle-button left&quot;&gt;&lt;/div&gt;
                  &lt;osc-panel-inner class=&quot;left&quot;&gt;
                      &lt;osc-panel-header&gt;&lt;/osc-panel-header&gt;
                      &lt;osc-panel-content class=&quot;left&quot; id=&quot;osc-tree&quot;&gt;&lt;/osc-panel-content&gt;
                  &lt;/osc-panel-inner&gt;
              &lt;/osc-panel-container&gt;
              &lt;osc-panel-container class=&quot;center&quot;&gt;
                  &lt;osc-panel-header id=&quot;osc-greeting-header&quot;&gt;
                      Open Stage Control &lt;span class=&quot;version&quot;&gt;v1.9.1&lt;/span&gt;
                  &lt;/osc-panel-header&gt;
                  &lt;osc-panel-inner id=&quot;osc-container&quot;&gt;&lt;/osc-panel-inner&gt;
              &lt;/osc-panel-container&gt;
              &lt;osc-panel-container class=&quot;right&quot;&gt;
                  &lt;div class=&quot;resize-handle right&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;toggle-button right&quot;&gt;&lt;/div&gt;
                  &lt;osc-panel-inner class=&quot;right&quot;&gt;
                      &lt;osc-panel-header&gt;&lt;/osc-panel-header&gt;
                      &lt;osc-panel-content  class=&quot;right&quot; id=&quot;osc-inspector&quot;&gt;&lt;/osc-panel-content&gt;
                  &lt;/osc-panel-inner&gt;
              &lt;/osc-panel-container&gt;
              &lt;osc-modal-container&gt;&lt;/osc-modal-container&gt;
          &lt;/osc-panel-container&gt;
  
          &lt;osc-panel-container class=&quot;bottom minimized&quot;  id=&quot;osc-console&quot;&gt;
              &lt;div class=&quot;resize-handle bottom&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;toggle-button bottom&quot;&gt;&lt;/div&gt;
              &lt;osc-panel-inner  class=&quot;bottom&quot;&gt;
                  &lt;osc-panel-header&gt;&lt;/osc-panel-header&gt;
                  &lt;osc-panel-content&gt;&lt;/osc-panel-content&gt;
              &lt;/osc-panel-inner&gt;
          &lt;/osc-panel-container&gt;
  
      &lt;/osc-workspace&gt;
      &lt;div id=&quot;notifications&quot;&gt;&lt;/div&gt;
  
              &lt;script&gt;
                  window.IP=&quot;127.0.0.1&quot;
                  window.ENV={}
                  window.READ_ONLY=undefined
              &lt;/script&gt;&lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>This is the format I want it to get, but I'm missing so many objects that are created upon <code>JS processing</code> so for that I can use the <code>Ctrl + Shift + C</code> <strong>Inspector Tool</strong> to get the <code>After-JS</code> <strong>Source html code</strong> , but it is tabulated to be worked with the <strong>Inspector Tool</strong> itself.
  The work-around was to select the <code>&lt;html&gt;</code> or <code>&lt;body&gt;</code> tag and right click and <code>copy Inner HTML</code> , then I will get the following</p>
  <pre><code>    &lt;osc-workspace class=&quot;vertical&quot; style=&quot;--color-scrollbar:rgba(109,181,253,0.25); --color-scrollbar-on:rgba(109,181,253,0.75);&quot;&gt;
          &lt;osc-panel-container class=&quot;horizontal&quot; id=&quot;main&quot;&gt;
              &lt;osc-toolbar id=&quot;main-menu&quot;&gt;&lt;/osc-toolbar&gt;
              &lt;osc-panel-container class=&quot;left disabled minimized&quot; style=&quot;width: 0px; min-width: 0px;&quot;&gt;
                  &lt;div class=&quot;resize-handle left drag-event&quot; style=&quot;touch-action: none;&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;toggle-button left&quot;&gt;&lt;/div&gt;
                  &lt;osc-panel-inner class=&quot;left&quot;&gt;
                      &lt;osc-panel-header&gt;Project tree&lt;/osc-panel-header&gt;
                      &lt;osc-panel-content class=&quot;left&quot; id=&quot;osc-tree&quot;&gt;&lt;div title=&quot;The session will be saved as a fragment: only the first child of root will be saved.&quot; class=&quot;fragment-mode-warning&quot;&gt;&lt;i class=&quot;fa fa-fw fa-exclamation-triangle&quot;&gt;&lt;/i&gt; Fragment mode enabled&lt;/div&gt;&lt;input type=&quot;text&quot; placeholder=&quot;Filter...&quot; class=&quot;filter&quot;&gt;&lt;ol style=&quot;--depth: 1&quot;&gt;&lt;/ol&gt;&lt;/osc-panel-content&gt;
                  &lt;/osc-panel-inner&gt;
              &lt;/osc-panel-container&gt;
              &lt;osc-panel-container class=&quot;center&quot;&gt;
                  &lt;osc-panel-header id=&quot;osc-greeting-header&quot; class=&quot;hidden&quot;&gt;
                      Open Stage Control &lt;span class=&quot;version&quot;&gt;v1.9.1&lt;/span&gt;
                  &lt;/osc-panel-header&gt;
                  &lt;osc-panel-inner id=&quot;osc-container&quot;&gt;&lt;div id=&quot;WoVUaDanVO&quot; data-widget=&quot;WoVUaDanVO&quot; class=&quot;widget root-container flex-expand auto-height layout-grid layout-contain contains-tabs&quot; style=&quot;--color-scrollbar:rgba(109,181,253,0.25); --color-scrollbar-on:rgba(109,181,253,0.75);&quot;&gt;&lt;inner style=&quot;grid-template: none / repeat(8, 1fr);&quot; class=&quot;root&quot;&gt;&lt;div class=&quot;navigation main&quot;&gt;&lt;div data-widget=&quot;WydOgxHBNh&quot; style=&quot;&quot; class=&quot;tablink on&quot;&gt;tab_1&lt;/div&gt;&lt;/div&gt;&lt;div id=&quot;WydOgxHBNh&quot; data-widget=&quot;WydOgxHBNh&quot; class=&quot;widget tab-container flex-expand layout-default layout-contain contains-widgets show&quot; style=&quot;--color-scrollbar:rgba(109,181,253,0.25); --color-scrollbar-on:rgba(109,181,253,0.75);&quot;&gt;&lt;inner&gt;&lt;div id=&quot;WSRjfVaknN&quot; data-widget=&quot;WSRjfVaknN&quot; class=&quot;widget panel-container absolute-position no-inner-padding layout-horizontal layout-contain contains-widgets&quot; style=&quot;top: 170rem; left: 210rem; --color-scrollbar:rgba(109,181,253,0.25); --color-scrollbar-on:rgba(109,181,253,0.75);&quot;&gt;&lt;style&gt;#WSRjfVaknN { grid-column : span 9;}&lt;/style&gt;&lt;inner style=&quot;justify-content: flex-start;&quot;&gt;&lt;div id=&quot;WKwpiIWR2I&quot; data-widget=&quot;WKwpiIWR2I&quot; class=&quot;widget button-container absolute-position flex-expand drag-event&quot; style=&quot;top: 110rem; left: 60rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_1-1&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WV3wJwNPYb&quot; data-widget=&quot;WV3wJwNPYb&quot; class=&quot;widget button-container absolute-position flex-expand drag-event&quot; style=&quot;top: 110rem; left: 180rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_1-2&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WqsOfoVS8j&quot; data-widget=&quot;WqsOfoVS8j&quot; class=&quot;widget button-container absolute-position flex-expand drag-event&quot; style=&quot;top: 130rem; left: 310rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_1-3&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;W8F6uDIvvA&quot; data-widget=&quot;W8F6uDIvvA&quot; class=&quot;widget button-container absolute-position flex-expand drag-event&quot; style=&quot;top: 140rem; left: 420rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_1-4&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WNP4GNnJqc&quot; data-widget=&quot;WNP4GNnJqc&quot; class=&quot;widget button-container absolute-position flex-expand drag-event&quot; style=&quot;top: 150rem; left: 530rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_1-5&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WyOGdk4Liw&quot; data-widget=&quot;WyOGdk4Liw&quot; class=&quot;widget button-container absolute-position flex-expand drag-event&quot; style=&quot;top: 160rem; left: 640rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_1-6&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WCTyf07c7b&quot; data-widget=&quot;WCTyf07c7b&quot; class=&quot;widget button-container absolute-position flex-expand drag-event&quot; style=&quot;top: 160rem; left: 740rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_1-7&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WsXDTNkWIf&quot; data-widget=&quot;WsXDTNkWIf&quot; class=&quot;widget button-container absolute-position flex-expand drag-event&quot; style=&quot;top: 160rem; left: 850rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_1-8&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WtnaO5GqWU&quot; data-widget=&quot;WtnaO5GqWU&quot; class=&quot;widget button-container absolute-position drag-event on&quot; style=&quot;top: 580rem; left: 350rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_2-1&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;W7zncHUYO2&quot; data-widget=&quot;W7zncHUYO2&quot; class=&quot;widget button-container absolute-position drag-event&quot; style=&quot;top: 580rem; left: 470rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_2-2&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WYZNRYOv2T&quot; data-widget=&quot;WYZNRYOv2T&quot; class=&quot;widget button-container absolute-position drag-event&quot; style=&quot;top: 600rem; left: 600rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_2-3&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WAGBGGOqbw&quot; data-widget=&quot;WAGBGGOqbw&quot; class=&quot;widget button-container absolute-position drag-event&quot; style=&quot;top: 610rem; left: 710rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_2-4&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;Wj3tBkQd3l&quot; data-widget=&quot;Wj3tBkQd3l&quot; class=&quot;widget button-container absolute-position drag-event&quot; style=&quot;top: 620rem; left: 820rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_2-5&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WS4x-CjZBj&quot; data-widget=&quot;WS4x-CjZBj&quot; class=&quot;widget button-container absolute-position drag-event&quot; style=&quot;top: 630rem; left: 930rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_2-6&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WEgsr-R1vi&quot; data-widget=&quot;WEgsr-R1vi&quot; class=&quot;widget button-container absolute-position drag-event&quot; style=&quot;top: 630rem; left: 1030rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_2-7&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;Wf0Ryj4gNX&quot; data-widget=&quot;Wf0Ryj4gNX&quot; class=&quot;widget button-container absolute-position drag-event&quot; style=&quot;top: 630rem; left: 1140rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_2-8&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WuCztiYYGU&quot; data-widget=&quot;WuCztiYYGU&quot; class=&quot;widget button-container absolute-position drag-event&quot; style=&quot;top: 740rem; left: 310rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_3-1&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WqKriM9uoj&quot; data-widget=&quot;WqKriM9uoj&quot; class=&quot;widget button-container absolute-position drag-event&quot; style=&quot;top: 740rem; left: 430rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_3-2&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;Wv9DLsME6Q&quot; data-widget=&quot;Wv9DLsME6Q&quot; class=&quot;widget button-container absolute-position drag-event&quot; style=&quot;top: 760rem; left: 560rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_3-3&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;W4s1fAWx3C&quot; data-widget=&quot;W4s1fAWx3C&quot; class=&quot;widget button-container absolute-position drag-event&quot; style=&quot;top: 770rem; left: 670rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_3-4&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WrvKIuQuP5&quot; data-widget=&quot;WrvKIuQuP5&quot; class=&quot;widget button-container absolute-position drag-event&quot; style=&quot;top: 780rem; left: 780rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_3-5&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WoW2g_ZqNm&quot; data-widget=&quot;WoW2g_ZqNm&quot; class=&quot;widget button-container absolute-position drag-event&quot; style=&quot;top: 790rem; left: 890rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_3-6&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;W5qTyQzDPx&quot; data-widget=&quot;W5qTyQzDPx&quot; class=&quot;widget button-container absolute-position drag-event&quot; style=&quot;top: 790rem; left: 990rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_3-7&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;div id=&quot;WQuEVSRGYy&quot; data-widget=&quot;WQuEVSRGYy&quot; class=&quot;widget button-container absolute-position drag-event&quot; style=&quot;top: 790rem; left: 1100rem; touch-action: none;&quot;&gt;&lt;inner&gt;&lt;label&gt;button_3-8&lt;/label&gt;&lt;/inner&gt;&lt;/div&gt;&lt;/inner&gt;&lt;/div&gt;&lt;/inner&gt;&lt;/div&gt;&lt;/osc-panel-inner&gt;
              &lt;/osc-panel-container&gt;
              &lt;osc-panel-container class=&quot;right disabled minimized&quot; style=&quot;width: 0px; min-width: 0px;&quot;&gt;
                  &lt;div class=&quot;resize-handle right drag-event&quot; style=&quot;touch-action: none;&quot;&gt;&lt;/div&gt;
                  &lt;div class=&quot;toggle-button right&quot;&gt;&lt;/div&gt;
                  &lt;osc-panel-inner class=&quot;right&quot;&gt;
                      &lt;osc-panel-header&gt;Inspector&lt;/osc-panel-header&gt;
                      &lt;osc-panel-content class=&quot;right&quot; id=&quot;osc-inspector&quot;&gt;&lt;/osc-panel-content&gt;
                  &lt;/osc-panel-inner&gt;
              &lt;/osc-panel-container&gt;
              &lt;osc-modal-container&gt;&lt;/osc-modal-container&gt;
          &lt;/osc-panel-container&gt;
  
          &lt;osc-panel-container class=&quot;bottom minimized&quot; id=&quot;osc-console&quot; style=&quot;height: 0px; min-height: 0px;&quot;&gt;
              &lt;div class=&quot;resize-handle bottom drag-event&quot; style=&quot;touch-action: none;&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;toggle-button bottom&quot;&gt;&lt;/div&gt;
              &lt;osc-panel-inner class=&quot;bottom&quot;&gt;
                  &lt;osc-panel-header&gt;&lt;label&gt;Console&lt;/label&gt;&lt;div class=&quot;actions&quot;&gt;&lt;div title=&quot;Clear console&quot; class=&quot;clear&quot;&gt;&lt;i class=&quot;fa fa-fw fa-trash&quot;&gt;&lt;/i&gt;&lt;/div&gt;&lt;/div&gt;&lt;/osc-panel-header&gt;
                  &lt;osc-panel-content&gt;&lt;osc-console&gt;&lt;/osc-console&gt;&lt;osc-console-input&gt;&lt;textarea rows=&quot;1&quot;&gt;&lt;/textarea&gt;&lt;/osc-console-input&gt;&lt;/osc-panel-content&gt;
              &lt;/osc-panel-inner&gt;
          &lt;/osc-panel-container&gt;
  
      &lt;/osc-workspace&gt;
      &lt;div id=&quot;notifications&quot;&gt;&lt;/div&gt;
  
              &lt;script&gt;
                  window.IP=&quot;127.0.0.1&quot;
                  window.ENV={}
                  window.READ_ONLY=undefined
              &lt;/script&gt;
  
  
  &lt;div class=&quot;select-area hidden&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>In which the indentation gets broken after 4 levels deep, thus loosing the clarity of the code.</p>
  <p>Is there a way to copy this <code>After-JS</code> <strong>Source HTML</strong> keeping the indenation neatly?</p>