JavaScriptをデバッグ
Google ChromeではDev channelをインストールして、JavaScriptをGUIベースでデバッグする事が出来ます。
Dev channelはこちらよりインストールしてください。インストールに数分かかります。
インストールが完了したらバージョンを確認します。

chrome://chrome/


再起動が必要みたいなので再起動ボタンを押して再起動します。これでインストール完了です。

F12を押すと、ブラウザ下部にSourcesタブが開くので、それを選択します。するとhtmlファイルのソースが見えるようになります。
ソース内のjsをデバッグすることもできますし、読み込んでいるjsをデバッグすることも可能です。



行数部分をクリックするとその行がブレイクポイントとなりJavaScript実行時にブレイクポイント部分でブレイクし、デバッグ出来るようになります。
ステップイン、ステップオーバーなどは以下のとおりです。

コマンド動作
f11ステップイン
f10ステップオーバー
shift + f11ステップアウト
f8実行と停止
console.logを使用する
Chromeなら、console.logを使用してalertのようにデバッグ表示することができます。alertと違うのは、ポップアップで表示されずにconsoleに表示される点です。
console.logの出力先は、F12を押します。以下のconsole画面に出力されます。

console画面


Back to top

Information