AboutデジタルIT・インターネットホームページ作成ホームページ作成テクニック、小技JavaScriptを実行して出力されたHTMLソースを見る方法ホームページ作成/ホームページ作成テクニック、小技JavaScriptを実行して出力されたHTMLソースを見る方法JavaScriptが実行された結果として、どのような文字列やHTMLソースが出力されているのかを確認する方法を解説。ブラウザの「ソースを表示」機能では単にJavaScriptのソースコードが見えるだけです。なく、関数が処理された結果としてブラウザに出力されるHTML要素などの値を見たりファイルに保存したりする操作例をご紹介いたします。文宏ホームページ作成ガイドJavaScriptの実行結果として出力された文字列やHTMLソースを見たいJavaScriptの関数が出力した文字列やHTMLソースを確認する方法があると便利Webページの一部をJavaScriptで生成している際、JavaScriptが実行された結果として出力された文字列やHTMLソースを確認したい場合があります。JavaScriptが思ったとおりには動作しておらず、その原因がどの部分の処理にあるのかを突き止めたい場合には、それぞれの関数がどのような文字列や値・HTMLの要素などを出力したのかを確認できると役に立ちます。■ブラウザの「ソースを表示」機能では単にJavaScriptのソースコードが見えるだけブラウザの「ソースを表示」機能では、JavaScriptの実行結果としての出力内容までは見えないたいていのブラウザでは、メニューに「ソースを表示」などの項目が用意されており、WebページのHTMLソースを閲覧できます。そのようなソースの表示機能では、単にJavaScriptのソースコードがそのまま見えるだけです。JavaScriptの関数などが実行された結果として出力された文字列やHTMLソースを確認する役には立ちません。■ブラウザに内蔵されたデベロッパーツールなどの解析機能を使えば出力結果も見えるブラウザ内蔵のデベロッパーツールなどを使えばJavaScriptが出力した文字列やHTMLの要素なども見えるしかし、各ブラウザに内蔵されているデベロッパーツール(開発者ツール)などを起動すれば、JavaScriptが実行された結果としてブラウザに出力された文字列やHTMLソースを表示できます。その出力結果を新たなHTMLファイルとして保存したりもできます。ブラウザによっては、そのようなツールを起動しなくても、ソースを表示する際の操作を少しだけ工夫することでもっと手軽にJavaScriptの処理結果を確認することもできます。そこで本記事では、JavaScriptが実行された結果として、どのような文字列やHTMLソースが出力されているのかを確認する操作方法を、代表的なブラウザ別にご紹介いたします。以下のようなJavaScriptソースがHTML内に含まれている場合を考えます。}</script>上記は、for文を使って10回ループすることで10種類の画像を表示させる単純なJavaScriptソースです。このJavaScriptが実行されれば、変数iの中に0~9までの数値が順に代入されるため、下記のようにp要素やimg要素で構成される文字列が10セット出力されます。その結果として、「photo0.jpg」~「photo9.jpg」の合計10個の画像ファイルがWebページ上に表示されます。src="photo9.jpg"></p>このとき、先の(元々記述されている)JavaScriptソースではなく、後の(実行結果として出力された)HTMLソースを確認できれば、JavaScriptのデバッグなどに役立ちます。上記のJavaScriptソースの実行結果を実際にお使いのブラウザで表示確認してみたい場合は、下記のサンプルページをご覧下さい。→JavaScriptソース表示のテストページ表示例は図の通りです。JavaScriptによって10個のimg要素が出力されるため、No.0からNo.9まで10個の小さな画像が表示されています。■ブラウザの「ソースを表示」機能では、ただJavaScriptのソースコードが見えるだけブラウザのソース表示機能では、JavaScriptソースが見えるだけ上記のサンプルページを表示させた状態で、ブラウザのメニューから「ソースを表示」機能を使ってHTMLソースを見ても、図の赤丸部分のようにJavaScriptソースがそのまま見えるだけでしょう。JavaScriptの実行結果として出力された10個のimg要素など、実際にブラウザ上に表示されている内容に対するHTMLソースは見えません。■JavaScriptが動的に出力した文字列やHTML要素も表示するよう操作すれば見えるJavaScriptが出力した文字列を含んだHTMLソースが表示できている例しかし、JavaScriptが出力した文字列や値も含めてHTMLソースを表示できるよう操作すれば、図のように「動的に出力された文字列」も加わった状態のHTMLソースが見えます。※ここでは、p要素とimg要素で構成される文字列のセットが10個ほど並んで出力されていることが分かります。JavaScriptで出力されたHTMLソースが見えると不具合の調査に役立つこのように、「JavaScriptの関数などが実行された結果として、どのような文字列や値、データ、HTMLの要素などが出力されたのか」といった点が分かると、不具合の発生箇所を突き止めたい場合に役立ちます。表示されたHTMLソースから、意図とは異なる結果が出力されている箇所を見つければ、その部分を出力している処理に何らかの問題があるのだと分かりますから。その出力結果を別のHTMLファイルとして保存しておけば、JavaScriptを改めて実行することなく(過去の)出力結果を他人に見せることもできますし、後から自分で再度確認することもできます。これは、記述したJavaScriptの動作が実行環境に依存する場合や、出力結果が偶然に左右されるような場合に、(不具合の現象を他人に説明する目的などで)保存しておきたい際にも使えるでしょう。JavaScriptの実行によって出力されたHTMLソースは簡単に確認できる代表的なブラウザなら、Web開発系の解析機能が内蔵されている現在よく使われている代表的なブラウザなら、どれを使う場合でも簡単に「JavaScriptが実行された結果として出力された文字列やHTMLソース」を表示できます。操作が簡単なのは次のページでご紹介するFirefoxを使う場合ですが、Chromeでも内蔵のデベロッパーツールを活用すれば簡単ですし、EdgeやIEでも内蔵の開発者ツールを活用すれば同様のことができます。本記事のこれ以降ではブラウザ別の操作方法を解説していますので、お使いのブラウザに応じたページをご参照下さい。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。