title: How to view the html code that is used to display hidden json data?
body: <p>I'm trying to see the source code of some hidden data encoded using JSON and then shown in a webpage. If I am correct,  javascript will process the data and then show it in the browser using html + css. I'm not interested in the data, but in the html and css that the javascript uses to display the encoded JSON data. I can't find it after hours of trying. </p>
  
  <p>The website I'm experimenting on is YouTube and the data there is the comments. I can't find the the CSS and HTML that YouTube uses to display the comments. You can test on any video on YouTube <a href="https://www.youtube.com/watch?v=OWsyrnOBsJs" rel="nofollow">https://www.youtube.com/watch?v=OWsyrnOBsJs</a>. What I tried:</p>
  
  <p>1) Viewing the source code. All I got was that the comments are called from  div that has the  <em>id="comments-test-iframe"</em>. The code shown on YouTube site.</p>
  
  <pre><code>&lt;div class="comments-iframe-container"&gt;
      &lt;div id="comments-test-iframe"&gt;&lt;/div&gt;
      &lt;div id="distiller-spinner" class="action-panel-loading"&gt;
          &lt;p class="yt-spinner"&gt;
        &lt;img src="https://s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif" class="yt-spinner-img" alt="Loading icon"&gt;
  
      &lt;span class="yt-spinner-message"&gt;
  Loading...
      &lt;/span&gt;
    &lt;/p&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>2) File <strong>Save Page As > Web Page, Complete</strong> in both Firefox and Chrome. Comments would still be retrieved but from YouTube. So I couldn't get to see the css and html that YouTube uses to display the comments.</p>
  
  <p>3) I tried to install <a href="https://getfirebug.com/" rel="nofollow">Firebug 2.0</a>. I was able to see was the container used to display comments. again I couldn't see the html + css that is used to display the comments. What I got was only:</p>
  
  <pre><code>&lt;div id="comments-test-iframe" style="text-indent: 0px; margin: 0px; padding: 0px; background: none  repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 591px; height: 5375px;"&gt;
  </code></pre>
  
  <p>which is the div element or container that YouTube uses to display the comments. But however no comments.</p>
  
  <p>4) I tried to use [Html Clipper] (<a href="https://github.com/florentin/htmlclipper" rel="nofollow">https://github.com/florentin/htmlclipper</a>) which is a bookmarklet which lets you copy html sections of any web pages together with the attached css styles, it didn't work also.</p>
  
  <p>How can I get to see that css+html? Is there an easy to save what the browser is displaying literally avoiding to go Firebug and inspect? I'm curious what is the trick that Google is using here also?</p>