以前にも似たような記事を書きましたが、今回はChrome Developer toolsを用いたデバッグ方法のメモです。手っ取り早く変数や関数の状態を確認したいときのためのメモなので、そんなに細かいことは書きません。
Chrome Developer toolsでJavaScriptの変数や関数をデバッグするにはSourcesタブのWatchパネルにデバッグ対象の変数名や関数名を入力してデバッグする方法と、コードの任意の行にブレークポイントをセットしてデバッグする方法があります。
以下のJavaScriptをデバッグしてみます。
<html>
<script>
var abc = String.fromCharCode(81, 50, 57, 117, 65, 51, 74, 104, 100, 72, 86, 115, 89, 88, 82, 112, 98, 50, 53, 122, 73, 83, 66, 84, 100, 87, 78, 106, 65, 88, 78, 122, 65, 110, 86, 115, 98, 72, 107, 103, 65, 71, 86, 106, 98, 50, 82, 108, 65, 67, 69, 61).replace(/A/g, 'Z');
var def = atob(abc);
function hogefuga() {
var ghi = 'h' + 'o' + 'g' + 'e' + 'h' + 'o' + 'g' + 'e';
var jkl = 'fugafuga';
return ghi + jkl;
}
hogefuga();
</script>
</html>
以下はWatchパネルに変数名と関数名を入力してJavaScriptを実行した結果です。(変数名と関数名は+ボタンをクリックして入力します。)
変数abcとdefの状態が確認できます。
以下は関数hogefugaの戻り値にブレークポイントをセットして実行した結果です。(対象の行をクリックすることでブレークポイントの設定・解除ができます。)
変数ghiとjklの状態がハイライトされています。またブレークポイントでプログラムの実行を止めた状態で、画面左のソースコード内の変数をマウスオーバーすると変数の中身が確認できます。
以上。
