JSLintによるエラーチェック

JSLintと呼ばれるJavascriptの構文チェックツールが存在します。私はVimエディタを使っていますので、SyntasticというVimプラグインとJSLintを連携させることでVimでJavascriptを編集しながら随時構文チェックを行うことができます。もちろんVSCodeやAtomにもJSLintのプラグインが存在しますので、導入してみてください。

Vimで使用するには、まずはHomebrewでJSLintをインストールします。

brew install jslint

VimにSyntasticを導入した状態で.vimrcに以下の内容を記述します。

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"

これでSyntasticを通してJSLintによる構文チェックを有効化することができました。

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

Firefoxを開いた状態で右クリックから「検証」を選択することで、デベロッパーツール(インスペクタ)を開くことができます。
デベロッパーツールの中に「コンソール」があるので、ここにJavascriptの構文にエラーの情報などが表示されます。

また、JavaScriptでConsole.log(変数名);と書くとコンソールに出力されます。

使用例

Console.log('出力されたかな');

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

ブラウザにはJavascript実行時にブレークポイント(処理を一時停止して一行する実行する機能)を設定することができます。これはコードの任意の位置で一時停止することができ、この状態で一行ずつ処理を進めたり、変数の中身を監視することができます。

これはデベロッパーツール内のデバッガから行うことができ、左側のペインに表示されているソースというタブの中のリストから対象にしたいJavaScriptファイルを選択します。

breakpoint_lecture_source_callstack

真ん中のペインに選択したファイルのソースが表示されます。ブレークポイントを設定するにはブレークポイントを設定したい行番号をクリックします。

breakpoint_lecture_breakpoint

これでブレークポイントの設定が完了しました。続いてページの再読み込みを行うと、ブレークポイントを設定した行で処理が一時停止していることが確認できます。

この状態から処理を進めるには、ステップ移動を使用します。ステップ移動には、ステップオーバー、ステップイン、ステップアウトといった3つの移動方法が用意されています。

breakpoint_lecture_step

これからステップオーバー、ステップイン、ステップアウトそれぞれ説明します。

ステップオーバー

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

ステップイン

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

ステップアウト

ステップインで呼び出した関数の内部に進んだ場合、長い関数だった場合などに、その関数から抜けたいときに使用します。関数の最終行まで進めることができます。

上記の方法でステップ移動を行いながら右側のペインから各変数の中身を監視することができます。更に変数の値をクリックすることで変数の値を書き換えることもできます。

breakpoint_lecture_variables

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

ステップ移動と変数の監視以外に重要な機能としてコールスタックとウォッチ式があります。長くなりそうなので、ここでは触り程度に説明します。

コールスタックとは現在の関数がどこから呼ばれているかを教えてくれる機能です。ステップインやステップオーバーを多用していると、今どこにいるか分からなくなるときがありますが、これを見ることで現在見ている行はどこから呼び出されたかを確認することができます。

ウォッチ式とはソース中の任意の変数をあらかじめ登録しておくことで変数がスコープから外れてしまった場合でも監視を続けることが出来る機能です。Firefoxのデバッガは基本的には現在の行のスコープにある変数、もしくはグローバルスコープしか監視してくれません。グローバルスコープから対象の変数を確認しても良いですが、グローバルスコープ上から監視するのは非常に煩雑です。なので、特定の変数を常に監視したいときにはウォッチ式を使用します。

参考
JavaScriptのデバッグ – ブレークポイントの使用 | CodeGrid