【プログラミング】ブラウザ上でのデバッグ方法(JavaScript編)

エンジニアである以上、避けては通れないものがあります。

それは作成したプログラムの動作確認です。

今回はそんな悩めるエンジニアに向けて、ブラウザ上でのデバッグの方法を記載いたします。

自分も何回も調べることなので、備忘録として方法論をまとめておきたいと思います。

目的

プログラムが正常に動作しない時に確認する時はどうすればいいのかを提示することが最大の目的です。

本投稿で不具合の解答は示してはいません。

どのようにすれば、プログラムに潜む問題を洗い出すことが出来るのかを記載していきます。

デバッグ方法

ブラウザ上でのデバッグ

最も詳細にソースコードのデバッグを行うことができます。

ツールの使い方を覚えてしまえば、高度なデバッグを行うことができます。

統合開発環境を使ったことがある人なら操作感は似ているため、難なく使用していくことができると思います。

未経験の方はじっくり覚えていってください。

他の言語のデバッグツールでも似たようなことをするので、覚えておくと開発の現場で役に立つと思います。

ブラウザ上でのデバッグの使い方

JavaScriptはWebブラウザ上でソースコードが解釈されて実行されます。

さらにWebブラウザにはソースコードを制御できる機能も持ち合わせています。

デバッグツールでできる主な制御

具体的にJavaScriptのソースコードを制御できる機能とはどのようなことなのかを実際に見ていきます。

Safari

①Safariで開いたブラウザ上で右クリックをします。

②「要素の詳細を表示」をクリックします。

③「Webインスペクタ」という新しい画面が表示されます。

④「ソース」というタブをクリックします。

⑤JavaScriptの今回は「test.js」という名前で作成したファイルを選択します。

⑥ソースコードの行番号をクリックしてブレークポイントを設定します。

ブレークポイントとはプログラムを停止することができるポイントのことです。

例えば、10行目にブレークポイントを設定してみます。

⑦「button」をクリックしてJavaScriptを実行させます。

10行目が緑色になっていて、プログラムが停止していることがわかります。

ローカル変数の中身も右側に表示されています。

⑧「コンソール」タブを見ると途中でconsole.logが止めた場所までしか出ていないことがわかります。

⑨「ソース」タブに戻って、再度プログラムを実行します。

⑩赤枠のボタン「スクリプトの実行を続行する」をクリックするとブレークポイントの箇所からプログラムが再度実行されます。

番外)赤枠のボタン「ステップ」をクリックするとプログラムを一行ずつ実行することができます。

最終的に全て実行されて結果がコンソールに表示されます。

Google Chrome

①Google Chromeで開いたブラウザ上で右クリックをします。

②「検証」をクリックします。

③検証用の画面に移ります。(画像は右部のみ切り出しています。)

④「Sources」タブをクリックします。

⑤ソースコードの行番号をクリックしてブレークポイントを設定します。

ブレークポイントとはプログラムを停止することができるポイントのことです。

例えば、10行目にブレークポイントを設定してみます。

⑥「button」をクリックしてJavaScriptを実行させます。

10行目が青色になっていて、プログラムが停止していることがわかります。

ローカル変数の中身も右側に表示されています。

画面の下部に「Console」の表示も見ることができます。

「Console」を見ると途中でconsole.logが止めた場所までしか出ていないことがわかります。

⑦赤枠のボタン「Resume script execution」をクリックするとブレークポイントの箇所からプログラムが再度実行されます。

番外)赤枠のボタン「Step」をクリックするとプログラムを一行ずつ実行することができます。

最終的に全て実行されて結果がコンソールに表示されます。

まとめ

今回はブラウザ上でのデバッグ方法について解説しました。

全てを覚えるのは難しいですが、デバッグに必要な最低限の機能だけ覚えれば、強力な武器になると思います。

少しずつでも、有用なツールは覚えて使っていきたいものです。