Google ChromeではDev channelをインストールして、JavaScriptをGUIベースでデバッグする事が出来ます。
Dev channelは
こちらよりインストールしてください。インストールに数分かかります。
インストールが完了したらバージョンを確認します。
chrome://chrome/
再起動が必要みたいなので再起動ボタンを押して再起動します。これでインストール完了です。
F12を押すと、ブラウザ下部にSourcesタブが開くので、それを選択します。するとhtmlファイルのソースが見えるようになります。
ソース内のjsをデバッグすることもできますし、読み込んでいるjsをデバッグすることも可能です。
行数部分をクリックするとその行がブレイクポイントとなりJavaScript実行時にブレイクポイント部分でブレイクし、デバッグ出来るようになります。
ステップイン、ステップオーバーなどは以下のとおりです。
コマンド | 動作 |
f11 | ステップイン |
f10 | ステップオーバー |
shift + f11 | ステップアウト |
f8 | 実行と停止 |