diary_detail
HOME » スタッフブログ » developerのブログ » Javascriptのデバッグ

Javascriptのデバッグ

2010年6月28日

Author : developer

久し振りに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が見られるのって嫌ですよね。。

calendar

2010年6月の日記

site search