Google Chromeでjsにブレイクポイントを貼ると変数の中身が更に確認しやすい #JavaScript

はじめに

以前こんな記事を書きましたが更に補足です。

サンプルコード

index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>

    <body>
        <button id='sample'>SAMPLE</button>

        <script type="text/javascript" src="sample.js"></script>
    </body>
</html>

sample.js

$(function(){
    $('#sample').on('click', function(){
      var hoge = 'hoge';
      var test = 'テストだよー';
      var get_text = $('#sample').text();
      var long_text = 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん';
      var object = {'a': 'b', 'c': 'd', 'e': 'f', 'g': 'h', 'i': 'j', 'k': 'l', 'm': 'n', 'o': 'p', 'q': 'r', 's': 't', 'u': 'v', 'w': 'x', 'y': 'z'}
      console.log(hoge);
      console.log(test);
      console.log(get_text);
      console.log(long_text);
      console.log(object);
      alert('ここにブレイクポイントを貼って値を確認してみてください');
    });
});

やり方

Google Chromeのデベロッパーモードを起動
Sourcesタブに移動
sample.jsを選択
alert文のところにブレイクポイントを設置（行数の書いてある場所をクリック）
その状態でsampleボタンをクリック
ブレイク中にobjectの変数の上にマウスカーソルを合わせる

もうコンソールログいらないんじゃないかな^^;
今日知ってとても感動したので拡散の意味で記事にしました。
ブレイクポイント貼るだけでさっと中身が確認できて便利ですね