14
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

オブジェクトたちの協調ぶりを白日の下に晒すための野蛮なロガー

Posted at

コンストラクター役の Function を new して作成したインスタンス役のオブジェクトたちが、言われたとおりに仲良く力を合わせながら、ちゃんとおのおのの役目を果たしているのか確かめたい。
あるいは、いきなり面倒をみろと言われた見知らぬアンドキュメントなオブジェクトたちが、いったいどのように協調して成果を出そうとしているのか把握したい。

そんなとき、おそるおそるコードをまさぐってコツコツとデバッグプリントやブレークポイントで証拠を集め、次第に全体像をつかんでいくという地道なアプローチをとるのではなく、おおよそでもはじめから俯瞰で全体を見渡すことができたら仕事は相当捗るはずです。

たとえば、インスタンスを生成する前に、次のように監視したいクラスを指定しておくと、

var logger = new ObjectLogger();

logger.watch( [ 
	{ constructor: Man, className: "Man" },
	{ constructor: Dog, className: "Dog" }
] );

その後で、それらのクラスから生成されたインスタンスたちの働きぶりを次のようなチャートで確認できるとしたら。

ObjectLogger は、watch() で指定された Function オブジェクトのプロトタイプとプロトタイプチェーンを調べ、ロギング機能を注入します。
実際には、プロトタイプに定義されている関数を所定のプレフィクスを加えた別名の関数にコピーし、元の名前の関数をロギングしつつ元の関数を実行するあらたな関数で上書きするという野蛮な荒業を繰り出します。

監視対象に指定したクラスのインスタンスたちの仕事が一通り終わったあとに、ObjectLogger の chart() を実行すると、画面上に position:absolute の canvas 要素で上記のチャートを描画します。

UMLのシーケンス図風にインスタンスごとにレーンを描き、レーンの上に時系列で実行されたメソッドの call と return をプロットしていきます。

レーンの先頭のクラス名をクリックすると、当該のインスタンスを console に出力します。

レーンにプロットされた call 時点のメソッド名をクリックすると、メソッドに渡された引数(arguments)を含むログ情報を console に出力します。return 時点のメソッド名をクリックすると、メソッドの戻り値(value)を含むログ情報を console に出力します。

ソースとサンプルは下記の URL で入手できます。

14
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?