jQueryで追加した要素のデバッグ

Question

こんにちは、現在JQueryでホームページを作っています。
たとえば、次のようなコードを書いて要素をbodyに追加したとします。

    var obj = $('<table>');
    obj.append($('<tr>').append($('<td>').text('ほげほげ')));
    $('body').append(obj);

こうして動的に追加されたhtmlはホームページに表示はされますが、
htmlのソースを見たときには表示されません。
もっと複雑なコードを動的に追加した際間違えていたら、
htmlに表示されない分デバッグは面倒です。

追加した要素をhtmlのような形で見ることができれば楽にデバッグできると思うのですが、
何かいい方法はありませんか？

回答よろしくお願いします。

Answer 1

ChromeなどのデベロッパーツールのElementsで確認可能です。
またデベロッパーツールの左上の虫眼鏡マークをクリックして、画面の項目を選択する事により、選択した項目をElementsで確認する事も可能です。

Comments

[MitiMinish]

ばっちり見れました。
ありがとうございます。