Java script関数コールの追跡

2,725 views

Published on

春のJavaScript祭りにてLT。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,725
On SlideShare
0
From Embeds
0
Number of Embeds
1,226
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Java script関数コールの追跡

  1. 1. JavaScript 関数コールの追跡 @kobayan_tokyo
  2. 2. 自己紹介 @kobayan_tokyo (またはkobake) http://blog.clock-up.jp/ ・元ゲーム屋(10年) ・現フリーランスWeb屋(1年) ・C++, C#, Java, PHP, Ruby, JavaScript, CoffeeScript ・Ruby on Rails, CakePHP, .NET Framework ・Web, Windows, Android ・Visual Studio, IntelliJ IDEA, Brackets
  3. 3. JavaScriptの関数コールを追跡したい 人様の作ったサイトをハック解析したい ↓ とりあえず関数コールの流れをザックリ見たい
  4. 4. 手がかり1:ブレークポイント ・あたりをつけて「適当な場所にブレークポイントを付ける」 ・目的の関数が呼ばれたタイミングは分かる ・いちいち「これが呼ばれるだろう」というあたりを付けなければならない ・ブレークポイントに達する度にいちいち処理が止まって鬱陶しい (我々は何か特定の問題を解決したいのではなく、構造の解析を行いたいのだ)
  5. 5. 手がかり2:関数のラップ ・あたりをつけて「適当な関数をラップする」 ・目的の関数が呼ばれたタイミングは分かる ・いちいち「これが呼ばれるだろう」というあたりを付けなければならない ・ブレークポイントに達する度にいちいち処理が止まって鬱陶しい ・いまだに「あたりを付ける」必要はある ------------------------------------------------- org_hoge = hoge; hoge = function(){ console.log("---- hoge called ----"); org_hoge(); } -------------------------------------------------
  6. 6. 手がかり3:Function.prototype.call http://stackoverflow.com/questions/4921966/live-javascript-debugging-by-recording-function-calls-and- parameters -------------------------------------------------------------------------------------------------------------------------- Can you override Function.prototype.call and retrieve arguments and arguments.callee? -------------------------------------------------------------------------------------------------------------------------- な・・る・・ほ・・ど・・?? - Function.prototype.call … すべての関数の呼び出し - arguments.callee … 関数内で参照できる関数そのもの それはつまり、 関数すべてのコールを書き換えるという暴力的な働きかけ
  7. 7. Function.prototype.call書き換え http://stackoverflow.com/questions/5226550/can-i-override-the-javascript-function-object-to-log-all- function-calls --------------------------------------------------------------------- var origCall = Function.prototype.call; Function.prototype.call = function (thisArg) { console.log("calling a function"); var args = Array.prototype.slice.call(arguments, 1); origCall.apply(thisArg, args); }; --------------------------------------------------------------------- 想像には及びませんがこれは console.log 諸々自体の呼び出しにより 無限ループに。
  8. 8. 書き換える範囲を絞る http://stackoverflow.com/questions/5033836/adding-console-log-to-every-function-automatically ------------------------------------------------------------------------------- function augment(withFn) { var name, fn; for (name in window) { fn = window[name]; if (typeof fn === 'function') { window[name] = (function(name, fn) { var args = arguments; return function() { withFn.apply(this, args); return fn.apply(this, arguments); } })(name, fn); } } } augment(function(name, fn) { console.log("-------- calling " + name + " --------"); }); ------------------------------------------------------------------------------- window配下の関数(?)のみラップする
  9. 9. やってみよう ログ多すぎ!
  10. 10. もう少し絞る if (typeof fn === 'function') { if(name == 'setTimeout') continue; if(name == 'clearTimeout') continue; window[name] = (function(name, fn) { var args = arguments; return function() { withFn.apply(this, args); return fn.apply(this, arguments); } })(name, fn); }
  11. 11. 絞った結果 少しログ量が減った(それでも多いけど)
  12. 12. さらなる一歩 ・グローバル関数(?)以外の関数も監視したい ・コールスタックなんかも表示したい ・行番号やファイル名なんかも出したいよね (無名関数とかもあるし、これが無いとなんとも) (準備時間オーバーしました) (引き続き情報まとめ&調査していきます)
  13. 13. 近況 ・Chromeビルド環境構築中(ディスク足りなくなり そうなので出直し中)

×