JavaScriptを実行して出力されたHTMLソースを見る方法(2ページ目)

JavaScriptを実行して出力されたHTMLソースを見る方法：Firefox版

まずは、Firefoxでの操作方法をご紹介いたします。例示に使っているサンプルページや他のブラウザに関しては、本記事の1ページ目をご覧下さい。

【Firefox版の目次】

• JavaScriptを実行して出力されたHTMLソースをFirefoxで表示する方法
• JavaScriptを実行して出力されたHTMLソースをFirefoxで保存する方法
• 動的に出力されたHTMLソースだけでなく、画像も含めた何もかもを保存する方法

 

JavaScriptを実行して出力されたHTMLソースをFirefoxで表示する方法

Firefoxでは、メニューの「ページのソースを表示」機能を使った場合には、他のブラウザと同様に元のJavaScriptソースがそのまま表示されるだけです。

しかし、Webページ内の一部分（または全部）を範囲選択している状態でメニューから「選択した部分のソースを表示」機能を使えば、JavaScriptが出力した文字列や値などのHTMLソースも含んだ状態でソースを表示できます。
 
具体的には、下記の手順でFirefoxを操作するだけで「JavaScriptを実行した結果として出力されたHTMLソース」を見ることができます。

■操作手順： 1. Firefoxを起動して、望みのWebページを表示（JavaScriptを実行）します。 2. [Ctrl]＋[A]キーを押して、ページ全体を範囲選択します。または、HTMLソースを見たい一部分だけを範囲選択します。 3. 右クリックして表示されるメニュー（コンテキストメニュー）から、「選択した部分のソースを表示」項目をクリックします。

■結果： すると、「選択した部分のDOMソース」というウインドウが開きます。

ここに表示されているHTMLソースには、「元々HTMLソース内に記述されていたJavaScriptソース」だけでなく、スクリプトの実行結果として出力されたHTMLソースも含まれています。

つまり、今実際に見えている内容のHTMLソースが確認できます。

JavaScriptを実行して出力されたHTMLソースをFirefoxで保存する方法

スクリプトによって出力されたHTMLソースを含めた「HTMLソース全体」を保存することも簡単です。以下のように操作します。

■操作手順： 1. 先ほど表示させた「選択した部分のDOMソース」というウインドウのメニューから、「ファイル」→「名前を付けてページを保存」を選択するか、または[Ctrl]＋[S]キーを押して保存ダイアログを表示させます。

2. 適当な名称を付けて保存すれば、「JavaScriptを実行した結果として出力された内容」も含めた状態(※)でファイルに保存できます。

※ここには元々のJavaScriptソース（script要素など）自体も含まれている点に注意して下さい。このHTMLをブラウザで表示すると、JavaScriptの実行結果が二重に表示される可能性があります。それを避けるには、保存したHTMLソースの中からscript要素（<script>～</script>部分の記述など）を削除すると良いでしょう。

出力されたHTMLソースだけでなく、画像も含めた全体を保存する方法

なお、表示中のWebページを画像なども含めてまるごと保存できる機能を使えば、もっと簡単にJavaScriptの実行結果として出力されたHTMLソースを含めて保存できます。手順は以下の通りです。

■操作手順： 1. 望みのWebページを表示している状態で、[Ctrl]＋[S]キーを押します。

2. 名前を付けて保存ダイアログが表示されますから、ファイルの種類欄を「Webページ、完全」項目に変更し、適当なファイル名を付けて保存ボタンをクリックします。

※ファイルの種類欄で「Webページ、HTMLだけ」を選択してしまうと、JavaScriptが実行される前の状態（元々のHTMLファイル）だけが保存されますので注意して下さい。必ず「Webページ、完全」の方を選択する必要があります。

この方法で保存すると、JavaScriptの実行結果が含まれたHTMLを保存できるだけでなく、ページ内に表示されている画像などの各種ファイルも含めて保存されます（画像ファイルなどは必要に応じてフォルダが自動作成され、その中に保存されます）。画像を保存したくない場合は、先の「選択した部分のDOMソース」ウインドウを開く方法を使って下さい。

続いて、Internet Explorerでの場合をご紹介いたします。