10月 042012
 
このエントリーをはてなブックマークに追加
はてなブックマーク - JavaScriptで関数が何処から呼ばれたか調べる方法
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Post to Google Buzz
Bookmark this on FC2 Bookmark
Share on FriendFeed

 

JavaScriptのスタックトレース(プログラムの実行過程)を調べるには?

 

console.trace()メソッドを使用します。これを使えば、その関数が何処から呼ばれたか表示されます。トリガーになったのがどのオブジェクトのどのイベントであるかまで分かります。console.trace()メソッドを使うと呼び出し元の経路が全て分かります。

【 サンプルコード 】

<!DOCTYPE html>  
<html lang="ja"> 
<head>
<body>

Console.trace(変数)の確認

<script>
	window.onload = function() {

		sample( 1 );

		function sample( arg ) {
		  return test1( arg );
		}

		function test1( arg ) {
		  return test2( arg );
		}

		function test2( arg ) {
		  return test3( arg );
		}

		function test3( arg ) {
		  console.trace();  // この時点で呼ばれていた関数を順に表示します
		  return arg;
		}
	}
</script>

</body>
</html>

 

【 実行結果 】

chrome、Safari、FireFox(Firebug使用)、IE(8以上)のコンソール機能を使用します。

 

console.trace(); を入れた場所が、どこから呼ばれたか分かりますね。

この場合は、下から上へ(window.onload⇒sample⇒test1⇒test2⇒test3)順番に実行されているのが読み取れますね。右にはどのファイルのどの行で実行されているかも表示されます。

 

 

 

 


 Leave a Reply

(required)

(required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree

Get Adobe Flash player