久し振りにJavascriptを書く機会があり、ブラウザによって挙動が
違うので苦戦していました。（今も苦戦してるけど。。）

そんな時に役に立つのが、デバッグツール。
Firefoxでは有名なFirebugというpluginがありますが、他のブラウザは
どうしてるんだろう？ということで、今回使ったデバッグツールをご紹介。
というか、ブラウザに標準で入っているツールですけど。

IE8では、F12で開発者ツールが別ウィンドウで表示されます。（IE7以前には無かったと思う）
Google Chromeでは、Ctrl+Shift+Iでデベロッパーツールがウィンドウの下部に表示されます。

IE7など標準でデバッグツールが入っていない場合は、Firebug Liteをブックマークレットで
動かすのが便利です。ブレークポイントとかはれない（と思う）ので、HTMLや変数の確認程度に
なってしまいますが、余計なツールをインストールしないでいいのでお手軽です。

やり方は、以下のscript（かなり長いので切れないようにご注意を）をブックマークとかに登録して、
デバッグしたいページを開いたら、それを呼び出すだけでウィンドウの下部にFirebug Liteが表示されます。
（ブラウザのアドレスバーにコピペでもOK）

—– ここから —–
javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F.documentElement.namespaceURI;E=E?F[i+’NS’](E,’script’):F[i](‘script’);E=F[i](‘script’);E[r](‘id’,b);E[r](‘src’,I+g+T);E[r](b,u);(F[e](‘head’)[0]||F[e](‘body’)[0]).appendChild(E);E=new%20Image;E[r](‘src’,I+L);})(document,’createElement’,’setAttribute’,’getElementsByTagName’,’FirebugLite’,’1.3.0.3′,’firebug-lite-debug.js’,’releases/lite/latest/skin/xp/sprite.png’,’https://getfirebug.com/’,’#debug’);
—– ここまで —–

詳しくはこちら。
http://getfirebug.com/firebuglite#Bookmarklet

でも開発してる側からいうと、ユーザに簡単にHTMLやscriptが見られるのって嫌ですよね。。