JavaScriptの実行結果として動的に出力されたHTMLソースを見たい

JavaScriptが出力した内容を確認したい

JavaScriptが出力した内容を確認したい

ウェブページの一部をJavaScriptで生成しているとき、「スクリプトが実行された結果としてどんなHTMLソースが出力(生成)されたのか?」という点を確認したい場合があります。JavaScriptが思ったとおりには動作しておらず、その原因を考えたい際には特に「スクリプトによって出力された結果のソース」を確認できると便利です。


 
ブラウザの「ソースを表示」機能では確認できないが……
ブラウザの「ソースを表示」機能では、スクリプトの実行結果までは見えない

「ソースを表示」機能では見えない

ブラウザのメニューから「ソースを表示」などの機能を使っても、多くの場合は単にJavaScriptソースがそのまま見えるだけです。「スクリプトの実行結果として出力(生成)されたHTMLソース」がどのようなものなのかまでは分かりません。

しかし、


 
ブラウザ内蔵の解析機能を使えば見える
ブラウザ内蔵の解析機能を使えば見える

ブラウザ内蔵の解析機能なら見える

ソースを表示する操作を少し工夫したり、ブラウザに内蔵されている解析機能(開発者ツールなど)を起動することで、「スクリプトによって実際に出力(生成)されたHTMLソース」を表示したり、その内容を新たなHTMLファイルとして保存したりできます。


 

JavaScriptの実行結果として動的に出力されたHTMLソースの表示例

例えば、以下のようなJavaScriptソースがHTML内に含まれている場合を考えます。
<script type="text/javascript">
   for( var i=0 ; i<10 ; i++ ) {
      document.write('<p>No.' + i + ':<img src="photo' + i + '.jpg"></p>\n');
   }
</script>
上記は、for文を使って10回ループすることで10種類の画像を表示させる単純なJavaScriptソースです。このJavaScriptが実行されれば、下記のようにp要素やimg要素が10セット出力されるため、結果として「photo0.jpg」~「photo9.jpg」までの合計10個の画像が表示されます。
<p>No.0:<img src="photo0.jpg"></p>
<p>No.1:<img src="photo1.jpg"></p>
<p>No.2:<img src="photo2.jpg"></p>
<p>No.3:<img src="photo3.jpg"></p>
<p>No.4:<img src="photo4.jpg"></p>
<p>No.5:<img src="photo5.jpg"></p>
<p>No.6:<img src="photo6.jpg"></p>
<p>No.7:<img src="photo7.jpg"></p>
<p>No.8:<img src="photo8.jpg"></p>
<p>No.9:<img src="photo9.jpg"></p>

JavaScriptが実行された結果の表示例:
サンプルスクリプトの実行結果

サンプルスクリプトの実行結果

上記のJavaScriptの実行結果をブラウザで表示させると、例えば右図のように見えます。実際にお使いのブラウザで表示を確認してみたい場合は、下記のサンプルページをご覧下さい。

JavaScriptソース表示のテストページ

 
ただの「ソースを表示」機能を使った場合は:
JavaScriptソースがそのまま見えるだけ

JavaScriptソースが見えるだけ

ブラウザのメニューなどから「ソースを表示」機能を使ってページのソースを見ると、右図のようにJavaScriptソースがそのまま見えるだけです。JavaScriptの実行結果として実際にどのようなHTMLソースが出力(生成)されたのかまでは見えません。

しかし、


 
JavaScriptでの出力(生成)結果も併せて表示できる機能を使うと:
JavaScriptで出力(生成)されたHTMLソースも見えている

JavaScriptで出力(生成)されたHTMLソースも見えている

スクリプトが出力(生成)したHTMLソースも含めてソースを表示できる機能を使うと、右図のように見えます。ここでは、p要素とimg要素のセットが10個出力されていることが分かります。

このような形でソースが見えると、「JavaScriptが実行された結果としてどのようなHTMLソースが出力(生成)されたのか」が分かるため、不具合部分を突き止めたい際などに役立ちます。

また、その出力結果を別のHTMLファイルとして保存しておけば、(JavaScriptを実行せずに)実行結果を他人に見せたり、後から自分で再度見たりすることができます。これは、動作が環境に依存する場合や、結果が偶然に左右される場合に、(不具合の現象を他人に説明する目的などで)保存しておきたい際にも使えるでしょう。


 

JavaScriptによって動的に出力されたソースは、簡単に確認できる

ブラウザ内蔵の解析機能を使えば見える

代表的なブラウザはどれも、解析機能を内蔵している

今回は、代表的な各ブラウザを使って「スクリプトを実行した結果として出力(生成)されたHTMLソースを見る方法」をご紹介いたします。

最も操作が簡単なのはFirefoxですが、IEやChromeなどでも内蔵の「開発者ツール(Developer Tools)」機能を活用すれば同様のことができます。

次のページ以降で、ブラウザ別に具体的な操作方法をご紹介いたします。ぜひ、活用してみて下さい。


 
【本記事の目次】
1. Firefoxを使ってJavaScriptが動的に出力したHTMLソースを見る方法 (p.2)
2.Internet Explorerを使ってJavaScriptが動的に出力したHTMLソースを見る方法 (p.3)
3.Chromeを使ってJavaScriptが動的に出力したHTMLソースを見る方法 (p.4)
4. Operaや、Windows10のEdgeに関する補足情報 (p.5)