2014年5月31日土曜日

JavaScriptをWebコンテンツを見ながらデバッグする [Intenet Explorer] [firefox]

How to debug the JavaScript sources with watching the web contents
ホームページを作ったり、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 件のコメント:

コメントを投稿