最近、色々と jQuery を利用しています。
ですが、今ひとつ Debug の方法が不便ですね。
console もブラウザに依存してしまいます。
特に Tool を導入しているわけではないので文句を云うのも筋違いですが、
もう少し便利にできないかなぁ・・・、ということで幾つか調べてみました。
<html> <head> <script src="./jquery-1.9.1.min_.js"></script> <script type="text/javascript"><!-- $(function() { $('input').click(function (e) { debug_data(e); alert(disp_data); }); $('button').click(function (e) { debug_data(e); alert(disp_data); }); // debug data var disp_data = ''; var last_time = ''; function debug_data(e) { // data clear disp_data = ''; // event timestamp if (last_time) { disp_data = disp_data + 'timeStamp : ' + (e.timeStamp - last_time) + '\n'; } else { disp_data = disp_data + 'timeStamp : ' + 'Time check start' + '\n'; } last_time = e.timeStamp; // event type disp_data = disp_data + 'type : ' + e.type + '\n'; // event currentTarget disp_data = disp_data + 'currentTarget Node : ' + e.currentTarget.nodeName + '\n'; disp_data = disp_data + 'currentTarget ID : ' + e.currentTarget.id + '\n'; return disp_data; } }); --></script> <link rel="stylesheet" href="reset.css" type="text/css"> <style type="text/css"><!-- #menu_items { width : 200px; margin : 0 auto; padding : 20px; } --></style> </head> <body> <div id="menu_box"> <input type="button" id="input box1" value="input box1" /><br /> <input type="button" id="input box2" value="input box2" /><br /> <button id="button box1">button box1</button><br /> <button id="button box2">button box2</button><br /><br /> </div> </body> </html>
sampleページで 各ボタンを click するとボタンについての情報が表示されます。
■event.timestamp
event が発生した時の timestamp を取得します。
1970/1/1 から ミリ秒単位での経過時間を表示しています。
それにしても中途半端な時期からの表示ですよね・・・
まぁ、値をそのまま表示してもあまり意味はありません。
処理の開始時と終了時の差分をとってから、処理の経過時間を表示する事になりますね。
これで処理のどこで時間がかかるのがわかります。
■event.type
特に複数の event が絡み合っている場合に使用できるかと思います。
複数の event のうち、どの event によって発生するのかを判断できます。
まぁ、簡単な処理の場合は使うことはあまりないですね。
■event.currentTarget
実際に event が発生した Object を取得できます。
Object が本当に予定しているものかの判断に使えます。
target に関して言うと Debug だけではなく選択項目の親や子孫の Object を取得したりと
色々と使い道があるのではないでしょうか。
これで少しは今後の作業が楽になるといいのですが・・・
便利になることを願って使っていきたいですね。
jQuery はここからダウンロードしてください。