ChromeデベロッパーツールでJavascriptの変数の状態を確認する方法

プログラムコードに慣れていないと、jQueryやJavascriptのコードを見ても、変数の値を理解して読み取ることが難しいと思います。
そのような時、Chromeデベロッパーツールで、プログラム実行時の変数の値を確認できると、コードの理解を深めることができます。

「右クリック→検証」またはショートカットキー（mac)「option + command + I」でデベロッパーツールを開きます。

① Sourceタブをクリックし
② 左側に表示されたファイルリストの中から、jsファイルを開きます。
③ 選択したファイルの中身が表示されます。

実行したいプログラムまでいき、ブレイクポイントを設定します。
該当の行番号をクリックすると、青い矢印のようなマークがつきます。

① プログラムを実行するために、アンカーを設定している「section03」というボタンをクリックしてみます。
② 画面がデバッグ状態になります。
③ ソース表示に、プログラム実行時の変数の値が表示されます。

変数エリアにカーソルを当てて、変数の値を確認することもできます。