ホームページを作ったり、Webアプリケーションを開発しているとJavaScriptを使うことがあるかと思います。
JavaScriptを動かしながらじっくり検証したいことこともあるかと思います。
そんなときはInternet Explorer10・11やFirefoxの開発ツールを使うと簡単にデバッグすることが出来ます。
Inernet Explorer 11の場合
F12キーを押します。またはAltキーを押してメニューのツール - F12 開発ツール
をクリックします。
画面の下に開発ツールの画面が表示されるので一番左側の「デバッガー」(虫のイラストのような記号)というボタンをクリックします。
フォルダーのアイコンをクリックすると読み込まれているファイルが表示されます。デバッグしたいJavaScriptが書かれたHTMLファイルかJavaScriptファイルを選択します。
ソースが表示されるので、JavaScriptのステートメントの左側をクリックするとブレークポイントを置けます。
JavaScriptを実行させてブレークポイントで一時停止させてみました。変数にマウスポインターを重ねると内容が表示されます。ウォッチ式にもされます。
一時停止から再開するときは右向き三角ボタンかF5キー、ステップごとに実行するにはステップインボタンかF11キーで操作します。
console.logを実行すればコンソールに文字列を出力することもできます。
開発ツールを終了するにるにはF12キーを押すか、開発ツール画面右上の×ボタンをクリックします。
Inernet Explorer 10の場合
F12キーを押します。またはAltキーを押してメニューのツール - F12 開発ツール
をクリックします。
画面の下に開発ツールの画面が表示されるので「スクリプト」というタブをクリックします。
フォルダーのアイコンをクリックすると読み込まれているファイルが表示されます。デバッグしたいJavaScriptが書かれたHTMLファイルかJavaScriptファイルを選択します。
ソースが表示されるので、JavaScriptのステートメントの左側をクリックするとブレークポイントを置けます。
ブレークポイントで停止させるには「デバッグ開始」ボタンをクリックします。
「デバッグ開始」ボタンはクリックするたびに「デバッグ停止」ボタンに変化します。
JavaScriptを実行させてブレークポイントで一時停止させてみました。変数にマウスポインターを重ねると内容が表示されます。ウォッチ式にもされます。
一時停止から再開するときは右向き三角ボタンかF5キー、ステップごとに実行するにはステップインボタンかF11キーで操作します。
console.logを実行すればコンソールに文字列を出力することもできます。
開発ツールを終了するには「デバッグ停止」ボタンをクリックし、F12キーを押すか、開発ツール画面右上の×ボタンをクリックします。
Firefox 29の場合
F12キーを押します。またはAltキーを押してメニューのツール - Web開発 - 開発ツールを表示
をクリックします。
画面の下に開発ツールの画面が表示されるので「スクリプト」というデバッガをクリックします。
開発ツール左側のソースの欄に読み込まれているファイルが表示されます。デバッグしたいJavaScriptが書かれたHTMLファイルかJavaScriptファイルを選択します。
ソースが表示されるので、JavaScriptのステートメントの左側をクリックするとブレークポイントを置けます。
JavaScriptを実行させてブレークポイントで一時停止させてみました。変数にマウスポインターを重ねると内容が表示されます。ウォッチ式にもされます。
一時停止から再開するときは開発ツール画面の左上にある右向き三角ボタンかF8キー、ステップごとに実行するにはステップインボタンかF11キーで操作します。
開発ツールを終了するにるにはF12キーを押すか、開発ツール画面右上の×ボタンをクリックします。
まとめ
異なるブラザーでもほぼ同じことが出来ました。方法を知っておくと開発が楽になりそうです。
関連ブログ
HTMLソースのミスやエラーを素早くチェックする[Windows] FirefoxでFlashがクラッシュ
[Firefox] 消えてしまったブログのHTMLソースを復元するには
[インターネット] Googleストリートビューにプライバシー情報が公開されてしまったら
[セキュリティ] bitly.com にスパムサイトと誤認されたら
[セキュリティ] Twitterに「スパム、または安全でない」と誤認されたら
以上、参考になれば幸いです。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。