Javascriptのエラーチェックとデバッグについて

Javascriptのエラーチェックやデバッグの方法で覚えたことがあったのでメモしておく。
デバッグの方法に関しては,各種ブラウザによって若干の差異があるので,今回はFirefoxを例にして説明する。
 

Javascriptのエラーチェック

Javascriptのエラーを確認するには,以下の2つの方法が存在し,どちらも行うことが望ましい。
 

JSLintによるエラーチェック

JSLintと呼ばれるJavascriptの構文チェックツールが存在する。私は,エディタはVimを使っているので,syntasticというVimプラグインとJSLintを連携させることで,VimでJavascriptを編集しながら随時構文チェックを行っている。
 
HomebrewでJSLintをインストールするには以下のコマンドを実行する。

brew install jslint

 
VimにSyntasticを導入した状態で.vimrcに以下の内容を記述することで,JSLintによる構文チェックを有効化することができる。

let g:syntastic_mode_map = { 'mode': 'active',
      \ 'active_filetypes': ['javascript'],
      \ 'passive_filetypes': [] }
let g:syntastic_javascript_jslint_conf = "--white --undef --nomen --regexp --plusplus --bitwise --newcap --sloppy --vars"

 

コンソールによるエラーチェック

Firefoxを開いた状態で,MacではCommand + Alt + I,WindowsではCtrl + Shift + Iというショートカットキーを入力することで,デベロッパーツールを開くことができる。デベロッパーツールの中に,コンソールというメニューがあるので選択する。
 
Javascriptの構文にエラーがあり,Firefoxが解釈できない場合には,コンソールにエラーログが出力される。
 

Javascriptのデバッグ方法

Javascriptのデバッグには,主に以下の2つの方法が存在する。
 

console.log()によるデバッグ

console.log()というJavascriptの関数をJavascriptのソース内に記述しておくことで,Firefoxのコンソールに任意のログを出力することが出来る。
 
console.log()の使用例

console.log('犬可愛いよー!');

 

ブレークポイントによるデバッグ

FirefoxやGoogle Chromeには,Javascript実行時にブレークポイントを使用する機能が用意されている。
ブレークポイントを使用することで,Javascriptのコード上の任意の位置で処理を一時停止することができ,この状態で,一行ずつ処理を進めたり,変数の中身を監視することが出来る。
 
まずは,Firefoxを開いた状態で,MacならCommand + Alt + I,WindowsならCtrl + Shift + Iでデベロッパーツールを開く。ツールの中のデバッガを選択する。
次に,左側のペインに表示されているソースというタブの中のリストから,対象にしたいJavascriptファイルを選択する。
 
breakpoint_lecture_source_callstack
 
すると,真ん中のペインに,選択したJavascriptファイルのソースが表示される。ブレークポイントを設定するには,ブレークポイントを設定したい行の行番号をクリックする。
 
breakpoint_lecture_breakpoint
 
これでブレークポイントの設定が完了した。続いて,Command + RやF5キーなどでページの再読み込みを行う。
ページの再読み込みが完了すると,ブレークポイントを設定した行でJavascriptの処理が一時停止していることが確認できる。
 
この状態から処理を進めるには,ステップ移動を行う必要がある。ステップ移動には,ステップオーバー・ステップイン・ステップアウトの3つの移動方法が用意されており,いずれかの移動を手動で行う必要がある。
 
breakpoint_lecture_step
 
ステップオーバー・ステップイン・ステップアウトのそれぞれの意味について説明する。
 

ステップオーバー

現在の行を実行し、次の行に進める。もし現在の行に関数呼び出しがあったとしても関数へジャンプせずに関数の処理を行い、次の行に進む。
 

ステップイン

現在の行を実行し、次の行に進める。もし現在の行に関数呼び出しがあった場合、その関数にジャンプし、呼び出した関数の内部に進める。
 

ステップアウト

ステップインで,呼び出した関数の内部に進んだ場合,物凄く長い行の関数だった場合などに,その関数から抜けたいときに使用する。関数の最終行まで進める。
 
上記3つの移動方法を使って,ステップ移動を行いながら,右側のペインにて,各変数の中身を監視することが出来る。更に,変数の値をクリックすることで変数の値を書き換えることも出来る。
 
breakpoint_lecture_variables
 

コールスタックとウォッチ式について

ステップ移動と変数の監視以外に,重要な機能としてコールスタックとウォッチ式がある。長くなりそうなので,ここでは触り程度に説明する。
 
コールスタックとは,現在の関数がどこから呼ばれているかを教えてくれる機能である。ステップインやステップオーバーを多用していると,今どこにいるか分からなくなるときがある。そういったときは,これを見ることで,現在見ている行はどこから呼び出されたかを確認することが出来る。
 
ウォッチ式とは,ソース中の任意の変数をあらかじめ登録しておくことで,変数がスコープから外れてしまった場合でも監視を続けることが出来る機能である。Firefoxのデバッガは基本的には,現在の行のスコープにある変数,もしくはグローバルスコープしか監視してくれない。グローバルスコープから対象の変数を確認しても良いが,グローバルスコープ上から監視するのは非常に煩雑になっており,面倒である。なので,特定の変数を常に監視したいときには,ウォッチ式を使用する。
 
 
以上
 
 
参考
JavaScriptのデバッグ – ブレークポイントの使用 | CodeGrid

Article written by

One Response

  1. BINGE
    BINGE at | | Reply

    いろいろと、文章を拝見させていただきました。
    javascriptについても、デバッグが出現しているとは・・・。(←当然じゃ!)
    わたしも、ホームページとかで、javascriptとかやってまして、デバッグやってます。

    ↓デバッグについて、記事、書きました。よろしければ、参照ください。
    http://binge3.web.fc2.com/bun/77.html

コメントを残す