8行でjQueryのデバッグが楽になるjQuery.pの紹介

週末はオレ標準JavaScript勉強会のUstreamを眺めてました。ago（@kyo_ago）です。

以前jQuery使いが陥りやすい罠の中で「4 何でも一行で書こうとする」という点を上げたのですが、以下のようなmethodを定義することでmethod chainのデバッグが楽になるので紹介したいと思います。

$.fn.p = function (id) {
    var arg = [this];
    if (id) arg.unshift(id);
    if (!window.console) return this;
    var c = window.console || { 'log' : function () {} };
    (c.debug || c.log).apply(c, arg);
    return this;
};

具体的な使い方ですが、以下のように確認したいmethodの後に.p()を追加するとその時点のjQuery Objectの中身がconsole.debug（が無い場合、console.log）に出力されます。

$('#aaa').p()
    .find('.bbb').p()
        .filter(':first').p()
            .addClass('head').p()
            .end()
        .end()
    .parents('tag').p()
        .children(':first').p()
            .addClass('head').p()
            .end()
        .end()
    .end()
;

欠点として「console.debugで表示される行番号が$.fn.pで定義された行番号になる（呼び出し元の行番号で表示できない）」という問題がありますが、呼び出し元を把握したい場合.p('hoge')のように引数を渡すとそれも一緒に出力するのである程度把握できると思います。

カヤックではデバッグの好きな技術者も募集しています！