jquery エレメントのデバッグを分かりやすくする方法

javascript

How do I console.log a jQuery DOM Element in Chrome? - Stack Overflow
デバッグに関する面白い回答があった。

例えば↓のようなhtmlがあったとして、

<div>
  <label>
    <input type="radio" class="flat" name="radio1" value="0" />チェック1
  </label>
  <label>
    <input type="radio" class="flat" name="radio2" value="1" />チェック2
  </label>
</div>

findの結果を見たい場合、

$(function(){
 console.log($("div").find('input'));
});

とやるとchromeだと↓の結果が表示される

[input.flat, input.flat, prevObject: n.fn.init[1], context: document, selector: "div input"]

これ前々から思っていたけどスゲー分かりにくい。
そこで↓のlog()を定義する

$(function(){
  $.fn.log = function() {
    console.log.apply(console, this);
    return this;
  };
  // コンソールに出力
  $("div").find('input').log();
});

分かりやすい結果となる↓

<input type=​"radio" class=​"flat" name=​"radio1" value=​"0">
<input type=​"radio" class=​"flat" name=​"radio2" value=​"1">​

低予算で始められるおすすめのFX口座はこちら。
http://s2fx.com/ranking/856.html