5/5 JavaScriptを実行して出力されたHTMLソースを見る方法 [ホームページ作成] All About

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

JavaScriptが実行された結果として、どのような文字列やHTMLソースが出力されているのかを確認する方法を解説。ブラウザの「ソースを表示」機能では単にJavaScriptのソースコードが見えるだけです。そうではなく、関数が処理された結果としてブラウザに出力されるHTML要素などの値を見たりファイルに保存したりする操作例をご紹介いたします。

補足：Microsoft Edgeでは

Windows10のMicrosoft Edgeでは「ソースを表示」を選択するだけで「F12 開発者ツール」が起動する

Internet Explorerの後継ブラウザ「Edge」では、コンテキストメニュー（右クリックして表示されるメニュー）から「ソースを表示」を選ぶだけで開発者ツールが起動します。本記事の3ページ目でご紹介したとおり「DOM Explorer」タブを選択すれば、JavaScriptの実行結果を含むHTMLソースを確認できます。

なお、Windows 10に標準で搭載されているIE11でも同様の仕様になっています。

※サードパーティ製のテキストエディタなどを導入していて、ソースの表示に使われるツールを変更している場合は別です。その場合は、[F12]キーを押すことで開発者ツールを起動できます。

補足：Operaでは

Operaの「開発者ツール」は、Chromeとほぼ同じ

OperaにもJavaScriptの実行結果を含むHTMLソースを確認できる「開発者ツール」が内蔵されています。[Ctrl]＋[Shift]＋[I]キーで起動できます。操作方法は本記事の4ページ目で解説したChromeとほぼ同じですので、ここでは割愛しました。

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

今回は、JavaScriptの実行結果として動的に出力されたHTMLソースを見たり保存したりする方法として、Windows版のFirefox、Internet Explorer、Chromeを使って操作する方法をご紹介いたしました。Webページを生成するJavaScriptがうまく動いていないように思える場合など、スクリプトでの生成内容をちょっと確認したくなった際には、ぜひ活用してみて下さい。

【関連記事】